Question

我无法弄清楚如何将现有的webpack 3 CommonsChunkPlugin迁移到新的webpack 4 optimization.splitChunks。

我现有的配置可以提炼为以下内容：

module.exports = function (env) {
    const entry = {
        common: ['libA', 'libB', './common/A.js', './common/A.js', /* ... */],
        pageA: ['./src/pageA/file1.js', './src/pageA/file2.js', /* ... */],
        pageB: ['./src/pageB/file1.js', './src/pageB/file2.js', /* ... */],
        /* ... */
    };

    return {
        entry,
        output: {
            path: path.resolve('./dist'),
            filename: `[name]${env.mode === 'production' ? '.min' : ''}.js`,
            chunkFilename: `[name]${env.mode === 'production' ? '.min' : ''}.js`
        },
        module: {
            /* ... */
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                filename: `[name]${env.mode === 'production' ? '.min' : ''}.js`,
                chunks: Object.keys(entry),
                minChunks: 10
            })
        ]
    };
};

这会生成一个名为common.min.js的公共块，其中包含（至少）common条目中指定的所有文件，并且还会添加至少10个条目中使用的所有文件。

如何使用optimization.splitChunks在webpack 4中执行此操作？

Answer 1

我做了类似的事情：

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: 'commons',                   
                minChunks: entries.length,
                chunks: 'initial'
            }
        }
    }
}

由于我没有将显式模块声明为块，因此您需要更改块以包括所选的块。我没有像您这样的条目中有“公共”入口点。

无法从CommonsChunkPlugin迁移到Webpack 4 optimization.splitChunks

1 个答案: