Webpack implicit vendors chunk

Question

I am struggling following the docs on implicit common vendor chunk.

I would like all node_modules to be in a vendor chunk. I have one entry point (app), with several children chunks. I tried:

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendors',
  minChunks: module => module.context && module.context.includes('node_modules'),
}),

-> strips all node_modules from the entry chunk (app.chunk.js) but leaves node_modules in the children

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendors',
  children: true,
  minChunks: module => module.context && module.context.includes('node_modules'),
}),

-> strips node_modules from all children chunks but NOT from app...

Looking for a way to do both (strip node_modules from ALL chunks and put them in vendors.chunk.js).

Thanks in advance,

PS: using https://chrisbateman.github.io/webpack-visualizer/ to analyze the outputs

I'm also having the same issue. Very surprised that no-one else has found this to be an issue. I asked the same question here: https://stackoverflow.com/questions/47695981/webpack-extract-common-modules-from-entry-and-child-chunks-to-separate-commons — Oliver Joseph Ash, Dec 07 '17 at 22:38
Hey, I managed to meet my use case. Here's a repository: https://github.com/Zephir77167/ssr-starter-pack — adrienharnay, Dec 08 '17 at 08:08

score 0 · Accepted Answer · answered Dec 10 '17 at 12:51

I managed to make it work:

  new webpack.optimize.CommonsChunkPlugin({
    name: 'client',
    async: 'common',
    children: true,
    minChunks: (module, count) => {
      if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) {
        return false;
      }
      return count >= 3 && module.context && !module.context.includes('node_modules');
    },
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'client',
    children: true,
    minChunks: module => module.context && module.context.includes('node_modules'),
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendors',
    minChunks: module => module.context && module.context.includes('node_modules'),
  }),

First use of the plugin extracts modules used 3 times or more in the codebase into a common chunk (except node_modules and css/scss).

Second use of the plugin extracts node_modules from the children chunks to the entry chunk.

Third use of the plugin extracts node_modules from the entry chunk into a node_modules chunk.

Webpack implicit vendors chunk

1 Answers1