[webpack-plugin] html-webpack-pl

在探究使用 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

作者水平有限，如有错误，欢迎指正交流。