所需插件
html-webpack-plugin
本教程基于已经搭建好的webpack环境,详见Webpack 4 学习01(基础配置)
-
**了解
html-webpack-plugin**
HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。
-
安装依赖
npm install html-webpack-plugin --save-dev
-
配置
webpack.config.js
文件-
在头部定义常量,引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
-
在
plugins
模块引入new HtmlWebpackPlugin({ template:'./public/index.html', //模板文件路径 filename:'webpack.html', //生成的html文件名称 minify:{ minimize:true, //打包为最小值 removeAttributeQuotes:true, //去除引号 removeComments:true, //去除注释 collapseWhitespace:true, //去除空格 minifyCSS:true, //压缩html内css minifyJS:true, //压缩html内js removeEmptyElements:true, //清除内存为空的元素 }, hash:true //引入产出资源的时候加上哈希避免缓存 })
-
-
运行打包命令之后就可以压缩
webpack --mode development
-
打包效果
public 下的 index.html 打包成为 build下面的 webpack.html啦。