vuecli3.0脚手架默认的webpack版本是4.0所以要用SplitChunksPlugin插件;
webpack4之前的都是利用CommonsChunkPlugin插件来进行公共模块抽取;
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('preload');
config.plugins.delete('prefetch');
// 压缩代码
config.optimization.minimize(true);
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
},