如何单独捆绑供应商脚本并根据需要使用 Webpack 调用它们？

我正在尝试做一些我认为应该可行的事情，但我真的无法仅从 webpack 文档中理解如何做到这一点。

我正在编写一个 JavaScript 库，其中包含多个可能相互依赖或不依赖的模块。最重要的是，所有模块都使用 jQuery，其中一些模块可能需要 jQuery 插件。然后，该库将在可能需要部分或全部模块的几个不同网站上使用。

定义我的模块之间的依赖关系非常容易，但定义它们的第三方依赖关系似乎比我预期的要困难。

我想实现什么：对于每个应用程序，我希望有两个捆绑文件，一个包含必要的第三方依赖项，另一个包含我的库中的必要模块。

Example: 假设我的库具有以下模块：

• a（需要：jquery、jquery.plugin1）
• b（需要：jquery、a）
• c（需要：jquery、jquery.ui、a、b）
• d（需要：jquery、jquery.plugin2、a）

我有一个应用程序（将其视为唯一的入口文件）需要模块 a、b 和 c。对于这种情况，Webpack 应生成以下文件：

• 供应商捆绑包：使用 jquery、jquery.plugin1 和 jquery.ui；
• 网站捆绑：带有模块 a、b 和 c；

最后，我更愿意将 jQuery 作为全局的，这样我就不需要在每个文件上都需要它（例如，我可以只在主文件上需要它）。 jQuery 插件只会在需要时扩展 $ 全局（如果它们可用于其他不需要它们的模块，这不是问题）。

假设这是可能的，那么这种情况下的 webpack 配置文件示例是什么？我在配置文件中尝试了加载器、外部组件和插件的几种组合，但我并没有真正了解它们在做什么以及我应该使用哪些。谢谢你！

在我的 webpack.config.js （版本 1,2,3）文件中，我有

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

在我的插件数组中

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

现在我有一个文件，仅根据需要将第 3 方库添加到一个文件中。

如果您想更详细地区分供应商和入口点文件：

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

请注意，插件的顺序很重要。

另外，这将在版本 4 中发生变化。当它正式发布时，我会更新这个答案。

Update:Windows 用户的 indexOf 搜索更改