#StackBounty: #webpack #webpack-4 How to configure webpack 4 to prevent chunks from list of entry points appearing in any other bundle?

Bounty: 50

I am working on a large project and trying to land webpack 3 -> 4 update. This app has a number of entry points (bundles) that are guaranteed to be on every page. Our goal is to configure webpack to build our assets so that any chunks that appear in any of these bundles will not appear in any other bundle.

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. Halp!

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.