Webpack Chunks split for website and widget (based on entrypoint)

Question

I have two webpack entrypoints: index and widget.

The index entrypoint generates the necessary entry for our main webpage. The widget entrypoint generates a stripped down version without footer and header, so it can be integrated via an iFrame. But additionaly to an html integration I would like to provide an window.myLibrary.render function. In order to integrate this I need a fixed js bundle.

So entry index should be like: index.bundle.js /js/chunk-common.45abbf61.js /js/chunk-vendors.575dd2e2.js

And entry widget should integrate common and vendors chunk in widget.bundle.js or load the common and vendor chunk from widget.bundle.js

Is this feasible?

My current configuration looks likes following but it just bundles common and vendor into the entrypoint bundles.

optimization: {
      splitChunks: {
        chunks: 'all',
        minChunks: 2,
        minSize: 20000,
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        enforceSizeThreshold: 50000,
        cacheGroups: {
          default: false,
          common: false,
          // We want all vendor (node_modules) to go into a chunk.
          vendors: {
            test(module, chunks) {
              // The (production) vendors bundle only includes modules that are
              // referenced from the main chunk.
              // Modules under node_modules that are referenced from the test bundle should not
              // be included (they are bundled into the test bundle).
              const isInChunk = chunkName =>
                chunks.some(chunk => chunk.name === chunkName);
              console.log(chunks.map(chunk => chunk.name));
              return (
                /[\\/]node_modules[\\/]/.test(module.resource) &&
                !isInChunk('widget')
              );
            },
            name: 'vendors',
            // 'all' is confusing - it basically means test all modules regardless if they
            // are statically (via require(x)/import 'x'; ie 'initial' option)
            // or dynamically (via import('x'); ie 'async' option)
            // loaded.
            chunks: 'all',
            reuseExistingChunk: true
          }
        }
      }
    }

Ortolan

Answer 1

I found the answer in Auto-load a chunk in entry point.

You have to define chunks: ['widget'] on the widget entrypoint and then define the optimization config as follows:

config.optimization.splitChunks({
      cacheGroups: {
        defaultVendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: chunk => chunk.name !== 'widget'
        },
        common: {
          name: `chunk-common`,
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    });

Ortolan