Question

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

我希望webpack将需要包含的任何lodash代码放入供应商包中。在babel-plugin-lodash分割供应商和应用程序包之后，我知道如何在供应商包中包含所有的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

您可以传递Bundle args = getArguments(); int myInt = bundle.getInt(key, defaultValue);函数来实现自定义逻辑：https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

您可以使用它来检查导入的模块是否来自minChunks。

e.g。我使用以下内容将从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

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

1 个答案: