我们最终正在努力将我们的代码库转换为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中的工作方式,我们希望用必要的依赖项替换 vendor
和 angular
入口点,由所有非角度块和角度块分别确定 .