如何单独捆绑供应商脚本并根据需要使用 Webpack 需要它们? [英] How to bundle vendor scripts separately and require them as needed with Webpack?

问题描述

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

I'm trying to do something that I believe should be possible, but I really can't understand how to do it just from the webpack documentation.

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

I am writing a JavaScript library with several modules that may or not depend on each other. On top of that, jQuery is used by all modules and some of them may need jQuery plugins. This library will then be used on several different websites which may require some or all modules.

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

Defining the dependencies between my modules was very easy, but defining their third-party dependencies seems to be harder then I expected.

我想要实现的目标:对于每个应用程序，我希望有两个包文件，一个包含必要的第三方依赖项，另一个包含我的库中的必要模块.

What I would like to achieve: for each app I want to have two bundle files one with the necessary third-party dependencies and other with the necessary modules from my library.

示例:假设我的库有以下模块:

Example: Let's imagine that my library has the following modules:

• a(需要:jquery、jquery.plugin1)
• b(需要:jquery，a)
• c(需要:jquery、jquery.ui、a、b)
• d(需要:jquery、jquery.plugin2、a)

我有一个需要模块 a、b 和 c 的应用程序(将其视为唯一的入口文件).这种情况下的 Webpack 应该生成以下文件:

And I have an app (see it as a unique entry file) that requires modules a, b and c. Webpack for this case should generate the following files:

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

• vendor bundle: with jquery, jquery.plugin1 and jquery.ui;
• website bundle: with modules a, b and c;

最后，我更愿意将 jQuery 作为全局变量，因此我不需要在每个文件上都需要它(例如，我可以只在主文件中需要它).并且 jQuery 插件只会在需要时扩展 $ 全局(如果它们可用于不需要它们的其他模块，这不是问题).

In the end, I would prefer to have jQuery as a global so I don't need to require it on every single file (I could require it only on the main file, for example). And jQuery plugins would just extend the $ global in case they are required (it is not a problem if they are available to other modules that don't need them).

假设这是可能的，那么对于这种情况，webpack 配置文件的示例是什么?我在我的配置文件中尝试了几种加载器、外部和插件的组合，但我真的不明白它们在做什么以及我应该使用哪些.谢谢！

Assuming this is possible, what would be an example of a webpack configuration file for this case? I tried several combinations of loaders, externals, and plugins on my configuration file, but I don't really get what they are doing and which ones should I use. Thank you!

推荐答案

在我的 webpack.config.js (Version 1,2,3) 文件中，我有

in my webpack.config.js (Version 1,2,3) file, I have

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
]

现在我有一个文件，它只根据需要将 3rd 方库添加到一个文件中.

Now I have a file that only adds 3rd party libs to one file as required.

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

If you want get more granular where you separate your vendors and entry point files:

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);
    }
  })
]

注意插件的顺序很重要.

Note that the order of the plugins matters a lot.

此外，这将在第 4 版中更改.当正式发布时，我会更新此答案.

Also, this is going to change in version 4. When that's official, I update this answer.

更新:windows 用户的 indexOf 搜索更改

Update: indexOf search change for windows users

这篇关于如何单独捆绑供应商脚本并根据需要使用 Webpack 需要它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！