javascript - 如何将生成的运行时 block 捆绑到 Webpack 4 中的显式 vendor block 中

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"
   }
 };

执行输出信息如下:

我希望将运行时 block 捆绑到 vendor block 中。我应该怎么办 ，提前致谢。

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"
       }
     };
``