5

我需要单独的 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,
  }),
  // ...
],
// ...
4

1 回答 1

4

您可以传递一个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
  }
于 2016-01-15T09:59:17.393 回答