javascript - 我如何使用 webpack 强制将单独需要的 lodash 模块放入 vendor block 中？

Question

我需要单独的 lodash 模块，这样我的 JS 构建只包含我需要的 lodash 代码(例如 import map from 'lodash/map' 而不是 import _ from 'lodash '。(实际上，我正在使用 babel-plugin-lodash 来自动执行此操作。)所以在代码中的任何地方我实际上都没有导入整个 'lodash'。

我希望 webpack 将任何需要包含在 vendor 包中的 lodash 代码放入。正在关注the webpack examples out there为了拆分 vendor 和应用程序包，我知道如何在 vendor 包中包含 所有 lodash(使用 CommonsChunkPlugin)。但我不想只使用 'lodash' 作为入口点并引入整个库。相反，我想让我实际导入的所有以 lodash 开头的模块最终出现在 vendor 包中。

有什么想法吗？

添加

由于我为每个应用程序构建了 3 个 bundle ，情况变得更加复杂:一个 vendor bundle 、一个跨应用程序通用的 bundle (将使用 lodash 模块)和特定于应用程序的代码(也将使用lodash 模块)。

以下是我的 webpack 配置的关键部分:

// ...
entry: {
  specificApp: specificAppEntry,
  appCommon: [appCommonEntry],
  vendor: [listOfVendorJsLibraries],
},
// ...
plugins : [
  new webpack.optimize.CommonsChunkPlugin({
    names: ['appCommon', 'vendor'],
    minChunks: Infinity,
  }),
  // ...
],
// ...

Answer 1

您可以传递一个minChunks 函数来实现自定义逻辑:https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

您可以使用它来检查正在导入的模块是否来自 node_modules/lodash。

例如我使用以下方法将从 node_modules 导入的所有内容 放入 vendor 包中:

import path from 'path'

import webpack from 'webpack'

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks: function (module, count) {
    return (
      module.resource &&
      module.resource.indexOf(path.resolve('node_modules')) === 0
    )
  }
})

---

与 CommonsChunkPlugin 一起使用的工作解决方案，如评论中所述:

  minChunks: function(module, count) {
    return module.resource && module.resource.indexOf('lodash') !== -1
  }