Webpack 4 and splitChunks - move all vendor code to a separate chunk except for the dynamically imported module

Question

I have a project that looks like this:

app.js
module1.js
node_modules

module1 is imported dynamically in app.js via import(/* webpackChunkName: 'module1' */ '@path').

I'm trying to configure the splitChunks plugin so it would output:

app chunk including src code without dependencies and packages;
module1 chunk that includes both the source code AND required dependencies from node_modules for the dynamically imported module;
vendor chunk that includes the rest of the dependencies from node_modules;

What is the best way to do that? The application has a single entry, which is app.js

score 2 · Accepted Answer · answered Aug 26 '20 at 07:14

2

Solved it with the following config. The key here is chunks: inital in vendor cachegroup.

  optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {
        vendors: false,
        default: false,
        vendor: {
          chunks: 'initial',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          reuseExistingChunk: true
        },
      },
    },

answered Aug 26 '20 at 07:14

vldmr

103
7

FYI: The two default `cacheGroup`s are `default`,`defaultVendors` in the current [Webpack 5 docs](https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks). – NeoZoom.lua Apr 05 '22 at 00:10

Webpack 4 and splitChunks - move all vendor code to a separate chunk except for the dynamically imported module

1 Answers1