《电子商务网站开发与管理》/新站优化案例

生成html文件

1. 需要下载1个插件模块

   • html-webpack-plugin@4: HtmlWebpackPlugin简化了HTML文件的创建，你可以让插件为你生成一个HTML文件，使用默认模板, 或使用你自己指定的模板

2. webpack.config.js插件配置

   const HtmlWebpackPlugin = require("html-webpack-plugin");
   plugins: [ // 配置各种插件new HtmlWebpackPlugin({ // 插件配置对象title: "webpack ldx使用",filename: "index.html", // 产出文件名(在dist目录查看)template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)inject: true, // 代表打包后的资源都引入到html的什么位置favicon: "./assets/favicon.ico", // 插入打包后的favicon图标// base: "./", // html网页中所有相对路径的前缀 (一般不给/给./, 虚拟路径)// 控制html文件是否要压缩(true压缩, false不压缩) minify: {                             //对html文件进行压缩，collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabledcollapseWhitespace: true,         //是否去除空格，默认falseminifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值falseminifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）removeAttributeQuotes: true,      //是否移除属性的引号 默认falseremoveComments: true,             //是否移除注释 默认falseremoveCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认falseuseShortDoctype: true             //使用短的文档类型，将文档转化成html5，默认false}}) // 数组元素是插件new对象
   ]	
   

3. src/index.html 静态网页模板

4. 执行webpack打包命令, 观察在dist生成的目录中, 是否新增了xxx.html文件, 并且会自动引入所有需要的外部资源

报错

Cannot find module “webpack/lib/node/NodeTeplatePlugins”

在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本

插件配置项: