我们最终正在努力将代码库过渡到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来完成此任务的方法，希望能够尽快找到解决方案。