I am working on a large project and trying to land webpack 3 -> 4 update. This app has somewhere around 1,000 entry points, and about 10 of those are considered "global" or "core" and guaranteed to be on every page. These core bundles contain a mix of vendor and non-vendor code. I need to configure webpack to build all of these assets so that any chunks appearing in any of these bundles will not appear in any other bundle regardless of the size of the chunk, without creating new assets that need to be added to the page.
With webpack 3, we have been using CommonsChunkPlugin to accomplish this. Here's a simple example:
new webpack.optimize.CommonsChunkPlugin({ name: 'a-global-bundle', minChunks: Infinity,}),Now with webpack 4 and the removal of CommonsChunkPlugin, it isn't clear to me how to accomplish this sort of optimization.
I'd like to be able to give webpack a list of entry points and any chunks that appear in any of those will not appear in any other bundle, but I'm not sure how to do this. I've read through some forthcoming documentation on splitChunks but I haven't been able to piece together a solution.
I've set up a small repo as a starting point to tinker with: https://github.com/lencioni/webpack-splitchunks-playground
One interesting direction I'm trying out is configuring cacheGroups with a group for each of these entry points and implementing the test option with a function that does this check. However, the documentation is pretty sparse on this, so I'm not really sure what the right way to write this test function would be or even if this will work at all.
