webpack4 (四) 生成HTML(html-webpack-plugin)

327 阅读1分钟

 1. 了解html-webpack-plugin

HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件。

根据src下的index.html自动在打包后的目录下生成html文件,相关引用关系和文件路径都会按照正确的配置被添加进生成的html里

2. 安装依赖

npm install html-webpack-plugin --save-dev

3. 配置config文件

new htmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
title:'lxb_test',
chunks:['app'],
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true,// 压缩内联css
minifyJS:true
}
}),