Javascript 如何单独捆绑供应商脚本并根据需要将其与Webpack一起使用？

我正在尝试做一些我认为应该是可能的事情，但我真的不明白如何做仅仅从网页文档

我正在编写一个JavaScript库，其中包含几个相互依赖或不依赖的模块。除此之外，所有模块都使用jQuery，其中一些模块可能需要jQuery插件。该库将用于多个不同的网站，这些网站可能需要部分或全部模块

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

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

示例： 让我们假设我的库具有以下模块：

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

我有一个应用程序（将其视为唯一的条目文件），需要模块a、b和c。此案例的网页包应生成以下文件：

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

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

---

假设这是可能的，在这种情况下，Web包配置文件的示例是什么？我在配置文件中尝试了几种加载程序、外部程序和插件的组合，但我并不真正了解它们在做什么以及应该使用哪些。谢谢大家!

我不确定我是否完全理解您的问题，但由于我最近遇到类似问题，我将尽力帮助您解决

供应商捆绑包。

你应该用这个。在配置中，指定区块的名称（例如，

vendor

）和将生成的文件名（

vendor.js

）

现在，重要的是，您现在必须指定它是什么意思

vendor

library，并在条目部分中这样做。再向条目列表添加一个与新声明的区块名称相同的项目（即本例中的“供应商”）。该条目的值应该是要移动到

vendor

bundle的所有模块的列表。 在您的情况下，它应该类似于：

entry: {
    app: 'entry.js',
    vendor: ['jquery', 'jquery.plugin1']
}

JQuery作为全局查询

我也有同样的问题，用同样的方法解决了。在这里，您不是定义全局对象，而是定义模块的shutcuts类型。i、 e.您可以这样配置它：

new webpack.ProvidePlugin({
    $: "jquery"
})

现在您可以在代码中的任何地方使用

$

，网页会自动将其转换为

require('jquery')

我希望这有帮助。您还可以查看我的网页包配置文件

我喜欢webpack，但我同意文档不是世界上最好的。。。但是嘿。。一开始人们对角度文档的看法是一样的：）

---

编辑：

要获得特定于入口点的供应商区块，只需多次使用CommonChunkPlugins：

new webpack.optimize.CommonsChunkPlugin("vendor-page1", "vendor-page1.js", Infinity),
new webpack.optimize.CommonsChunkPlugin("vendor-page2", "vendor-page2.js", Infinity),

然后为不同的文件声明不同的扩展库：

entry: {
    page1: ['entry.js'],
    page2: ['entry2.js'],
    "vendor-page1": [
        'lodash'
    ],
    "vendor-page2": [
        'jquery'
    ]
},

---

如果一些库在入口点之间重叠（对于大多数库），那么您可以使用相同的插件将它们提取到公共文件中，只是配置不同而已。参见示例。

也不确定我是否完全理解您的案例，但下面是为每个捆绑包创建单独供应商区块的配置片段：

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

---

并链接到

commonchunkplugin

docs:

，以防您有兴趣将您的脚本与供应商的脚本分开自动捆绑：

var webpack = require('webpack'),
    pkg     = require('./package.json'),  //loads npm config file
    html    = require('html-webpack-plugin');

module.exports = {
  context : __dirname + '/app',
  entry   : {
    app     : __dirname + '/app/index.js',
    vendor  : Object.keys(pkg.dependencies) //get npm vendors deps from config
  },
  output  : {
    path      : __dirname + '/dist',
    filename  : 'app.min-[hash:6].js'
  },
  plugins: [
    //Finally add this line to bundle the vendor code separately
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min-[hash:6].js'),
    new html({template : __dirname + '/app/index.html'})
  ]
};

您可以在中阅读有关此功能的更多信息。

在我的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
]

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

如果您想在分离供应商和入口点文件的地方获得更细粒度：

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中，这一点也将发生变化。正式发布后，我会更新这个答案

---

更新：windows用户搜索更改索引

非常感谢您的回复。这是迄今为止我看到的最好的方法，但不幸的是，它仍然不能解决我的问题。。。我测试了您的示例，vendor.js文件仍将包含来自“jquery”和“jquery.plugin1”的所有代码，即使我的任何模块都不需要它们。这意味着最终它们将始终加载到浏览器中。如果我有很多jquery插件，即使只使用了一半，也会产生一个非常大的文件。只有在需要的情况下，才有办法将“jquery.plugin1”包含在供应商包中吗？谢谢，所以我也学到了一些东西：）我通过创建多个供应商区块更新了我的答案。也许现在它更适合你。这个解决方案的问题是，它假设我知道每个页面的依赖关系。但我无法预测。。。只有当页面中使用的某个模块需要jQuery时，jQuery才应包含在供应商包中。通过在配置文件中指定，即使页面中使用的任何模块都不需要，它也将始终位于供应商包中，对吗？基本上，我无法预测供应商捆绑包的内容，否则我将有一个地狱般的工作，因为我没有只有2页，我有数百。。。你明白问题所在吗？有什么想法吗？：）我明白你的意思，但我不认为这是个问题。如果您在页面中使用新库，则只需将其添加到

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