Difference between splitChunks.chunks and splitChunks.test (webpack)

Question

Can anyone explain to me the difference between the splitChunks.chunks setting and the splitChunks.cacheGroups.{cacheGroup}.test setting in Webpack's SplitChunksPlugin? Especially if they're both used in a single cache group.

The documentation isn't very helpful in this regard, so help is appreciated

score 0 · Answer 1 · answered Sep 24 '19 at 09:16

With a splitChunks.cacheGroup.test setting you are able to put desired packages in one single chunk, which are resolved by your declared function (module, chunk):boolean | RegExp | string value.

For example let's say there is a valid splitChunks definition without cacheGroup section. Webpack build will output 10 chunks but you desire to cache some of the node_modules packages into single chunk (react, react-dom, lodash). With definition like so you will be able to do it:

cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/](react|react-dom|lodash)[\\/]/,
      name: 'vendor',
      chunks: 'all',
    }
}

These section will not interrupt other chunks split.

Difference between splitChunks.chunks and splitChunks.test (webpack)

1 Answers1