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

Question

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

我希望 webpack 将任何需要包含在供应商包中的 lodash 代码放入。按照 the webpack examples out there 拆分供应商和应用程序包，我知道如何在供应商包中包含 all 的 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
  }

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

How can I force individually required lodash modules into a vendor chunk with webpack?

javascript

lodash

webpack

javascript-build