如何将生成的运行时块捆绑到Webpack 4中的显式供应商块中

Question

正如标题所述。

该示例来自common-chunk-and-vendor-chunk

webpack.config.js：

module.exports = {
entry: {
    pageA: "./pageA",
    pageB: "./pageB",
    pageC: "./pageC"
},
mode: 'development',

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: {
            commons: {
                chunks: "initial",
                minChunks: 2,
                maxInitialRequests: 5, 
                minSize: 0
            },
            vendor: {
                test: /node_modules/,
                chunks: "all",
                name: "vendor",
                priority: 10,
                enforce: true
            }
        }
    }
 },
 output: {
     path: path.join(__dirname, "dist"),
     filename: "[name].js"
   }
 };

正在执行的输出信息如下：

我希望将runtime chunk捆绑到vendor chunk中。我该怎么办  ，谢谢。

Answer 1

自己解决。

module.exports = {
    entry: {
        pageA: "./pageA",
        pageB: "./pageB",
        pageC: "./pageC"
    },
    mode: 'development',

    optimization: {
        runtimeChunk: {
                   name: 'vendor',
                },
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5, 
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: "all",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
     },
     output: {
         path: path.join(__dirname, "dist"),
         filename: "[name].js"
       }
     };
``