webpack - Webpack 隐式供应商块

Question

我正在努力遵循有关隐式通用供应商块的文档。

我希望所有人都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 并将它们放在 vendor.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 块中。