如何单独捆绑供应商脚本并根据需要使用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.

I我正在编写一个包含多个模块的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 (requires: jquery, jquery.plugin1)
• b (requires: jquery, a)
• c (requires: jquery, jquery.ui, a, b)
• d (requires: 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插件只是在需要时扩展$ global（如果它们可用于其他不需要它们的模块则不会出现问题）。

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（版本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
]

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

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.

更新： indexOf对Windows用户的搜索更改

Update: indexOf search change for windows users

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