Webpack - 手动创建异步公共块答案

【问题标题】：Webpack - manually create async commons chunkWebpack - 手动创建异步公共块
【发布时间】：2016-06-28 14:15:40
【问题描述】：

在 Webpack 中，我将如何创建一个仅包含我指定的内容的普通（非条目）异步块。

例如，假设我有moduleA 和moduleB。两者都通过System.import 按需加载。 moduleA 和moduleB 都使用/shared 目录中的各种内容。我将如何创建一个包含（仅）所有共享内容的异步块？（在现实生活中，不仅仅是moduleA 和moduleB 在shared 中分享内容）

最接近的the docs 似乎是chunks 数组，但这似乎是用于分析公共内容的块，这些块将被提取到公共块中。

这个问题是this answer 的扩展（由 Webpack 创建者编写）。

我只是想知道如何（如果可能）通过手动指定来更好、更细粒度地控制 what 进入您的公共块进入他们。

【问题讨论】：

DllPlugin 听起来有点像您想要的，除了我不确定异步加载方面。你有看过吗？如果没有，我在github.com/markerikson/react-redux-links/blob/master/… 有几个关于 DllPlugin 的文章的链接。

标签： javascript webpack

【解决方案1】：

此插件将 shared 中使用的所有模块从至少两个具有共同父级的按需加载块中移动到单独的异步公共块中。

如果您知道公共父块（即路由器），则可以选择传递name 参数。

new CommonsChunkPlugin({
  async: true,
  children: true,
  minChunks: function(module, count) {
    return module.resource &&
      module.resource.indexOf("/path/to/shared/") === 0 &&
      count >= 2;
  }
})

【讨论】：