主页 / 问题 / 919740
Accepted
Владислав Заец
Asked:2020-12-14 05:08:38 +0800 CST2020-12-14 05:08:38 +0800 CST

Webpack4 女巫 webpack.optimize.CommonsChunkPlugin

  • 772

我正在使用 webpack 3 并想将我的项目迁移到 webpack 4。现在我正在使用。optimization.splitChunks但出现错误在此处输入图像描述

这是我的代码：

module.exports = function () {
    return {
        entry: {
            admin_app: exposePath('AdminApp', 'Components'),
            user_app: exposePath('UserApp', 'Components')
        },
        output: {
            path: paths.CLIENT_BUILD_PATH,
            filename: '[name].client.bundle.js',
            sourceMapFilename: 'maps/[name].client.map.js',
            chunkFilename: "chunks/[name].client.chunk.js"
        },
        /*plugins: [                                                  //  plugins from webpack 3
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: function (module) {
                    return module.context && module.context.indexOf('node_modules') !== -1;
                }
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest',
                minChunks: Infinity
            })
        ]
        */
        optimization: {         // so the code will be written on top (Webpack 4)
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        name: 'vendor',
                        test(module) {
                            return module.context && module.context.indexOf('node_modules') !== -1;
                        }
                    },

                    manifest: {
                        name: 'manifest',
                        minChunks: Infinity
                    }
                }
            }
        }
    };
};
webpack

1 个回答

  1. Best Answer

    webpack团队将所有优化移至optimization. 该属性splitChunks设置用于查找多个模块使用的模块的配置，将此模块分块到单独的文件中以减少重复：

    // webpack.config.js

module.exports = {
    ...,

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test(module) {
                        return module.context && module.context.indexOf('node_modules') !== -1;
                    }
                },

                manifest: {
                    minChunks: Infinity
                }
            }
        }
    }
};

    webpack允许您shared使用optimization.splitChunks.cacheGroups. 分块也默认在生产模式下完成。

    • 2

相关问题