在探究使用 webpack 打包代码时，如果你开发的是单页面富应用如 create-react-app，使用的模式就是单入口 js 文件配合单 html。这是通常的情况。由于只有一个 html 文件，所以许多人选择创建一个静态 html 文件，并手写<script />依赖标签，src 属性指向打包好的文件名。但是这样做你很快就会发现，如果你指定的打包文件名称如果是带有 [hash]/[chunkhash] 的字段，手写就会变得麻烦无比，所以笔者推荐如果你要生成 html 文件，还是使用此插件较为方便。
该插件只实现最底层的<script src="..." />指向关系，对于其他部分毫不干涉，所以很适用于帮助生成固定模板。
使用方法
1.安装 html-webpack-plugin
npm i -D html-webpack-plugin
2.配置 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry：...,
output:...,
plugins: [
new HtmlWebpackPlugin({
template:"./index.html" //指定按照哪个模板文件生成
})
]
}
如果你开发的是多页面应用，使用的模式就应该是多入口 js 配合指定依赖的多 html 模板，此时需要你必须为每个 html 文件配置不同的文件名称以及其依赖的模块名称。
！如果你不配置各个html文件的名称使其互不相同，那么后生成的同名文件就将覆盖先生成的文件
！如果你不指定每个html文件的依赖（js文件），会导致生成的那个html导入所有的入口（默认依赖所有）
配置多入口html，只需在 plugin 数组中多次 new 新对象即可。
const plugins = [
new HtmlWebpackPlugin({
filename: "index.html",
template: "./index.html",
chunks: ["index"]
}),
new HtmlWebpackPlugin({
filename: "index2.html",
template: "./index2.html",
chunks: ["index2"]
}),
new HtmlWebpackPlugin({
filename: "index3.html",
template: "./index3.html",
chunks: ["index3"]
})
];
module.exports = {
entry: {
index: "./src/index.js",
index2: "./src/index2.js",
index3: "./src/index3.js"
},
output: ...,
plugins:plugins
};
执行
npm run build
现在你可以看到生成了三个文件，且其依赖与不同的入口。
更多配置项请参见
github html-webpack-plugin
作者水平有限，如有错误，欢迎指正交流。
