How to move some modules into a separate chunk in Webpack4?

Question

webpack

I want to move all modules from node_modules to chunk 'vendor' except for angular - move it to chunk 'angular'. Configuration example below:

splitChunks: {
  minSize: 0,
  chunks: 'all',
  cacheGroups: {
    vendor: {
      name: 'vendor',
      test: /\/node_modules\//
    },
    angular: {
      name: 'angular',
      test: /\/node_modules\/(rxjs|@angular)\//
    }
  }
}

But in the above example, chunk 'angular' is not created for some reason.
How can I fix the config?
That being said, the following config works as intended:

splitChunks: {
  minSize: 0,
  chunks: 'all',
  cacheGroups: {
    vendor: {
      name: 'vendor',
      test: (chunks) => {
        if (!/\/node_modules\//.test(chunks.resource)) return false;
        return !/\/node_modules\/(rxjs|@angular)\//.test(chunks.resource);
      }
    },
    angular: {
      name: 'angular',
      test: (chunks) => {
        if (!/\/node_modules\//.test(chunks.resource)) return false;
        return /\/node_modules\/(rxjs|@angular)\//.test(chunks.resource);
      }
    }
  }
}

Answer 1

Better look in the direction of DLLPlugin
https://webpack.js.org/plugins/dll-plugin/#examples
Just breaking into chunks will not solve the build speed problem, everything will still be rebuilt on every run.
With DLLPlugin, vendors can only be rebuilt when they are updated.