我们最终正在努力将我们的代码库转换为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'), // all non-angular entry points
            minChunks: 2
        }))
    ]
}

我们的概念是,我们在网站的每个页面上加上 vendor 包,加上任何其他的entires,然后在需要角度的页面上,我们还包括 angular 包,以及所需的任何其他条目 . 我们没有为这样做找到一个好的配置 .

我们尝试了以下方法:

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

但这似乎产生了一个3 MB vendor_test 块(我们已经习惯了大约100kb),并且没有任何 angular_test 块 . 理想情况下,以及它在Webpack 3中的工作方式,我们希望用必要的依赖项替换 vendorangular 入口点,由所有非角度块和角度块分别确定 .