Question

我们最终正在努力将代码库过渡到Webpack 4，但是在复制CommonsChunkPlugin当前使用的设置以及使用新的splitChunks选项时遇到了一些麻烦。我们的webpack构建看起来像这样：

const config = {
    entry: {
        vendor: [
            'jquery',
            './libs/global',
            './css/forms.css'
            // ...
        ],
        angular: [
            'angular-timeago',
            'angular-cookies',
            'angular-messages',
            'angular-sanitize',
            'angular-animate',
            './libs/angular-common',
            // ...
        ],
        app1: ['./apps/app1/app'],
        app2: ['./apps/app2/app'],
        app3: ['./apps/app3/app'],
        app4: ['./apps/app4/app'],
        appWithoutAngular: ['./apps/app5/app'],
        app2WithoutAngular: ['./apps/app6/app'],
        // ... (50+ entries, some angular, some not)
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'angular',
            chunks: _.without(_.keys(config.entry), 'vendor', 'appWithoutAngular', 'app2WithoutAngular'), // exclude all non-angular entry points
            minChunks: 2
        }))
    ]
}

概念是，我们在网站的每个页面上都包含vendor捆绑包，以及所有其他整体，然后在需要倾斜的页面上还包含{{1 }}捆绑包，以及其他所需的条目。我们不会异步加载任何块，也没有找到合适的配置来做到这一点。

我们尝试了以下操作：

angular

但是，这似乎会生成3 + MB的config.optimization = { splitChunks: { cacheGroups: { default: false, vendors: false, vendor: { chunks: 'initial', priority: 10, name: 'vendor_test', reuseExistingChunk: true }, angular: { chunks: 'initial', minChunks: 2, name: 'angular_test', enforce: true, reuseExistingChunk: true, test: function(module, chunks){ return chunks.some(function(chunk){ return nonAngularChunks.includes(chunk.name); }); } } } } };块（我们习惯于大约100kb），却没有任何vendor_test块。理想情况下，以及它在Webpack 3中的工作方式，我们希望将angular_test和vendor入口点替换为必要的依赖关系，该依赖关系是由我们所有非角块确定的，然后是角分别。

我仍然没有找到使用Webpack 4来完成此任务的方法，希望能够尽快找到解决方案。

Webpack CommonsChunkPlugin迁移，带有2个命名的Commons块，50多个条目

0 个答案: