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

问题描述

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这样有什么问题？