小编典典

如何单独捆绑供应商脚本并根据需要使用 Webpack?

all

我正在尝试做一些我认为应该是可能的事情,但我真的无法从 webpack 文档中理解如何去做。

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

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

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

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

  • 一个(需要: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
配置文件的示例是什么?我在我的配置文件上尝试了几种加载器、外部和插件的组合,但我并没有真正了解它们在做什么以及我应该使用哪些。谢谢!


阅读 58

收藏
2022-08-20

共1个答案

小编典典

在我的 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 中发生变化。当这是官方的时,我会更新这个答案。

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

2022-08-20