输出文件管理
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> 文章来源: https://blog.csdn.net/jiuweiC/article/details/88862995