cacheGroups: {
default: false
}
}
至于all和initial的差别，可以看下这篇文章Webpack 4 — Mysterious SplitChunks Plugin （要科学上网）
里面有提到
initial 模式下会分开优化打包异步和非异步模块。而
all 会把异步和非异步同时进行优化打包。也就是说moduleA在indexA中异步引入，indexB中同步引入，
initial 下moduleA会出现在两个打包块中，而
all 只会出现一个。cacheGroups
使用cacheGroups可以自定义配置打包块。
// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'// indexB.js
import React from 'react'
import ReactDOM from 'react-dom'
import('lodash')
import $ from 'jquery'
// webpack.config.js
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'commons',
chunks: 'initial',
minChunks: 2
}
}
}
}
根据开头介绍webapck分割条件，一些公共模块被打包进了commons，自定义打包块的优先级是0，所以现在公共模块会被打包进commons，而不是上述提到的默认打包块vendors（优先级为负）。
但是这边为什么lodash为什么没打包在一起呢？可以回顾下initial和all的区别。接下来实验下all的效果。
// indexA, indexB同上
// webpack.config.js
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'commons',
chunks: 'all',
minChunks: 2
}
}
}
}
结果在预期中，lodash被打包在一起了。
提取第三方库
最后看下之前CommonsChunkPlugin常用的分离部分第三方库功能。这边你可以想一下怎么操作。
上面已经提到了设置
chunks: initial || all 都可以提取出第三方库。但是它是把所有第三库提取出来，所以我们在只提取react和react-dom的情况下，需要自定义一个cacheGroup。
// indexA.js
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import $ from 'jquery'// webpack.config.js
entry: {
indexA: path.join(__dirname, 'src/indexA.js')
},
optimization: {
