webpack 4 & 5 和 html-webpack-plugin 3.x & 5.x

问题描述

我刚刚从 webpack 4.x 迁移到 5.x，因此也将 html-webpack-plugin 从 3.x 更新到 5.x。我（出于某种原因）每个页面有多个条目，它们共享公共块，例如运行时块和供应商块。使用下面显示的配置，生成的 common.html 仅包含运行时块以及来自相应缓存组的供应商块。从入口点生成的 html 文件仅包含包，但不包含运行时和供应商块。迁移到 webpack 5 和 html-webpack-plugin 5.x 后，common.html 不包含任何内容，入口点的 html 文件都包含运行时和供应商块以及包。

新行为与webpack更新还是html-webpack-plugin的更新有关？我该怎么做才能收到前一个结果，这意味着只有运行时和供应商在 common.html 中分开，并且只有捆绑包，但条目 html 文件中没有共享文件？

我已经在谷歌上搜索了我的屁股并尝试了以下配置的无数变体，但没有成功。我的想法不多了，所以任何帮助表示赞赏。谢谢各位！

我的 webpack 配置：

module.exports = {
    entry: {
        first: './first.js',second: './second.js',},output: {
        path: path.join(__dirname,'dist/js'),filename: '[name].[contenthash].js',publicPath: ''
    },optimization: {
        runtimeChunk: "single",splitChunks: {
            cacheGroups: {
                default: false,defaultvendors: false,vendor: {
                    test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all',enforce: true,maxSize: maxChunkSize * 1024,minChunks: 2
                },}
        }
    },plugins: [
        new packages.htmlWebpackPlugin({
            template: 'template.html',filename: 'common.html',excludeChunks: ['first','second'],inject: false,}),new packages.htmlWebpackPlugin({
            template: 'template.html',filename: 'first.html',chunks: ['first'],filename: 'second.html',chunks: ['second'],]
};

我的环境：

Node.js v16.1.0
达尔文 20.4.0
npm 7.12.1
webpack@5.37.0
html-webpack-plugin@5.3.1

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html-webpack-plugin javascript webpack webpack webpack