输出文件管理
html文件需要引用js依赖，如果chunck name是根据[name]、[id]、[hash]、[chunkhash]自动生成的，每次依赖的文件名，可能不一致。使用插件自动生成index文件，并为我们管理输出文件
1.index.html的生成
方案一、根据模板自动生成index.html
plugins: [
//自动生成index.html文件、、、、、
new HtmlWebpackPlugin({
template: 'index.html',//以什么为模板文件，在模板文件下新增js依赖
inject: 'head',//body 将脚本放入head还是body里
}),
//该插件会根据output路径自动识别输出文件，并删除历史文件，只保留最新构建
new CleanWebpackPlugin(),
],
方案二、配合npm脚本
<%=htmlWebpackPlugin.options.title%>
<% %>js代码
<%= %>输出值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<%=htmlWebpackPlugin.options.title%>
</body>
</html>
2.html文件压缩
上面插件还可对html文件进行压缩，
例如去掉空格，，去掉注释等
3.将js文件与html文件分离开
设置输出文件路径，将html与其他文件分隔开
output: {
//文件名必须是动态生成的，不然会文件名冲突
filename: 'js/[name].bundle.js',
//会根据输出路径自动创建新的文件夹，HtmlWebpackPlugin，CleanWebpackPlugin俩插件会根据输出路径自动选择相应文件进行构建
path: path.resolve(__dirname, 'dist1')
},
3.完整配置如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
//自动生成index.html文件、、、、、
new HtmlWebpackPlugin({
template: 'index.html',//以什么为模板文件，在模板文件下新增js依赖
inject: 'head',//body将生成的文件
}),
//该插件会根据output路径自动识别输出文件，并删除历史文件，只保留最新构建
new CleanWebpackPlugin(),
],
output: {
//文件名必须是动态生成的，不然会文件名冲突
filename: 'js/[name].bundle.js',
//会根据输出路径自动创建新的文件夹，HtmlWebpackPlugin，CleanWebpackPlugin俩插件会根据输出路径自动选择相应文件进行构建
path: path.resolve(__dirname, 'dist1')
},
}
;
4.结果
1.自动生成的文件目录结构
2.生成的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板</title>
<script type="text/javascript" src="js/app.bundle.js"></script>
<script type="text/javascript" src="js/print.bundle.js"></script>
</head>
<body>
</body>
</html>