webpack4使用HtmlWebpackPlugin插件生成html时的runtimeChunks注入问题

Question

问题描述

webpack4使用HtmlWebpackPlugin插件生成html时的runtimeChunks注入问题

问题出现的环境背景及自己尝试过哪些方法

Webpack4使用optimization.splitChunks.cacheGroups提取公共代码块，再声明runtimeChunks为所有chunk生成一个运行时文件manifest，最后在使用HtmlWebpackPlugin生成html时，将manifest添加到HtmlWebpackPlugin.chunks中。最后发现splitChunks生效了，manifest也注入到了html中，但是实际上却无法根据manifest加载对应的代码块

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
// webpack.config optimization
optimization: {

runtimeChunk: {
    name: 'manifest'
},
splitChunks: {
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            minSize: 30000,
            minChunks: 1,
            chunks: 'initial',
            priority: 1
        },
        libs: {
            test: /[\\/]resources[\\/]js[\\/]/,
            name: 'libs',
            minSize: 30000,
            minChunks: 2,
            chunks: 'initial',
            priority: 0,
            reuseExistingChunk: true
        }
    }
}

}
// webpack.config plugins
plugins: [

new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
    template: "./index.html",
    inject: true,
    chunks: ['manifest', 'index', 'index2'],
    chunksSortMode: 'none'
})

]

你期待的结果是什么？实际看到的错误信息又是什么？

假设resources/js中有一个a.js且size超过了30kb，入口index.js和index2.js都import了这个a.js。那么在生成环境下预期的结果应该是生成index.[chunkhash].js、index2.[chunkhash].js、vendors.[chunkhash].js以及libs.[chunkhash].js以及manifest.[chunkhash].js，其中libs.[chunkhash].js应该就是打包后的resource/js/a.js。实际的情况是这些文件都正常生成了，但是打开浏览器发现manifest并没有生效，页面只加载了index.[chunkhash].js、index2.[chunkhash].js和manifest.[chunkhash].js，并没有加载vendors和libs。

不知道将manifest(runtimeChunks)直接注入HtmlWebpackPlugin的chunks这样有什么问题？

Answer 1

在查阅了一天文献之后，终于找到了问题所在。以上我所描述的这些操作其实都没有问题，出问题的是HtmlWebpackPlugin这个插件，在webpack升级到webpack4之后，我的HtmlWebpackPlugin版本还停留在3，所以在webpack4下出了bug，将HtmlWebpackPlugin升级到4.0.0-alpha.2就可以了。参考https://github.com/jantimon/h...

Answer 2

谢谢！ 找了很久是什么原因 终于在这得到解答了