如何使用 webpack 将单独需要的 lodash 模块强制放入供应商块中？

Question

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

我希望 webpack 将需要包含在供应商包中的任何 lodash 代码放入。遵循用于拆分供应商和应用程序包的 webpack 示例，我知道如何将所有lodash 包含在供应商包中（使用 CommonsChunkPlugin）。但我不想仅仅'lodash'用作入口点并拉入整个库。相反，我想让我实际导入的所有模块都lodash以供应商包结束。

有任何想法吗？

添加

由于我为每个应用程序构建了 3 个包，情况变得更加复杂：一个供应商包、一个跨应用程序通用的包（将使用 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
  }