Webpack4: Two vendor libraries based on entry points

Question

So, I've been hunting and I can't seem to find anything unless my searching skills have gotten worse lately. But, what I'm looking for is to be able to generate two vendor bundles based on the entry point.

For example, I have 3 entry points:

• Editor
• Public
• Auth

When a user is logged in, it'll include a variation of the auth, public and editor bundles. When a user is logged out, it'll only load the public bundle. Both of these situations will load a vendor bundle, but when we are logged out, I don't need to load the modules that are required in editor and auth so was hoping there was a way to split this out to vendor and vendor.auth, or something similar.

The only code I have at the moment for optimisation is the following:

optimization: {
    concatenateModules: true,
    splitChunks       : {
        cacheGroups: {
            commons: {
                test     : /[\\/]node_modules[\\/]/,
                name     : 'vendors',
                minChunks: 2,
                chunks   : 'all'
            }
        }
    }
},

Any help here would be much appreciated!

Thanks

Answer 1

You can separate the chunks into 2 common groups using a function as chunks property.

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: function (chunk) {
          return chunk.name == 'public';
        }
      },
      auth_commons: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors.auth',
        chunks: function (chunk) {
          return ['auth', 'editor'].includes(chunk.name);
        }
      }
    }
  }
},