Webpack 隐式供应商块

Question

我正在努力遵循隐式通用供应商块上的 docs。

我希望所有 node_modules 都在供应商块中。我有一个入口点 (app)，有几个子块。我试过了：

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

-> 从入口块 (app.chunk.js) 中剥离所有 node_modules，但在子

中留下 node_modules

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

-> 从所有子块中删除 node_modules，但不从应用中删除...

正在寻找一种方法同时进行（从所有块中剥离 node_modules 并将它们放入 vendors.chunk.js）。

提前致谢，

PS：使用https://chrisbateman.github.io/webpack-visualizer/分析输出

Answer 1

我成功了：

  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'),
  }),

第一次使用该插件会将代码库中使用 3 次或更多次的模块提取到一个公共块中（node_modules 和 css/scss 除外）。

插件的第二次使用将 node_modules 从子块提取到入口块。

插件的第三次使用将 node_modules 从入口块提取到 node_modules 块中。

Webpack 隐式供应商块

Webpack implicit vendors chunk

chunks

vendor

webpack

code-splitting