javascript - 创建多个 Webpack 构建并处理可选依赖项

Question

我正在使用 webpack 创建我正在创建的库的几个不同版本:

• 厨房水槽构建 - 包括已内置的所有全局依赖项，可以用作页面上包含的简单脚本。
• 模块构建 - 仅包含库代码，不包含依赖项。实现者必须确保部门本身可用。

我有 2 个 webpack 配置，每个构建一个。 webpack 配置文件之间的主要区别是最小构建使用如下的外部配置，它省略了构建中的依赖项。

{
  lodash: {
    commonjs: 'lodash',
    commonjs2: 'lodash',
    amd: 'lodash',
    root: '_'
  },
  rsvp: {
    commonjs: 'rsvp',
    commonjs2: 'rsvp',
    amd: 'rsvp',
    root: 'RSVP'
  }
}

如果我想将所有 lodash 包含在我的厨房水槽构建中，这非常有用。但考虑到 lodash 有点大，而且我只使用了 lodash 中的 ~ 3 个函数，我想转移到一个自定义构建，其中只包含我用来最小化文件大小的函数。我成功创建了 lodash 的自定义构建，它与我的厨房水槽构建按预期工作。

我遇到的问题是最小构建现在包含自定义 lodash 构建，而不是寻找全局实例。

我认为问题源于将 externals 映射到我在使用本地构建的 lodash 时更改为的 lodash 导入。

// My original import that correctly removed lodash from minimal build
var _ = require('lodash')

// The new import I'm using to use my custom build
var _ = require('./utilities/lodash.custom')

这里是我用来创建 lodash 的构建命令:

node ./node_modules/lodash-cli/bin/lodash -p include=partial,merge,find exports=node -o utilities/lodash.custom.js

有人知道如何正确使用外部来进行自定义 lodash 构建吗？

Answer 1

在对 webpack 中的不同配置选项进行了更多的修改之后，我发现了这一点。如果其他人偶然发现同样的问题，我正在回答我自己的问题。

我能够更新 webpack 配置，为我的自定义 lodash 构建创建一个 lodash 别名，因此当我导入 lodash 时，它实际上会导入我的本地构建，而不是从 NPM 下载的构建。

我的 lodash 导入的 index.js 文件保持不变，就像我从 NPM 导入一样:

var _ = require('lodash');

然后，我创建了一个自定义构建的 lodash，其中仅包含我的代码所需的功能。这将在 ./utilites/lodash.custom.js 文件下生成静态构建。

node ./node_modules/lodash-cli/bin/lodash -p include=partial,merge,find exports=node -o utilities/lodash.custom.js

然后在我的 webpack.conf.js 文件中添加了一个 resolve 部分，它将 lodash 命名空间指向我的本地 lodash 构建。

kitchen-sink-build.webpack.config.js

{
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    library: 'CorsClient',
    libraryTarget: 'umd',
    filename: 'CorsClient.js'
  },
  target: 'web',
  plugins: [],
  resolve: {
    alias: {
      'lodash': './utilities/lodash.custom'
    }
  }
}

这将生成一个输出文件，该文件使用我的自定义 lodash 构建并将其作为依赖项包含在内。这个厨房水槽构建将能够在任何网站上用作独立脚本。

通过向 webpack.conf.js 文件添加另一个 block ，我可以告诉 webpack 不包含 lodash，但期望它已经在全局范围内可用:

module-build.webpack.config.js:

{
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    library: 'CorsClient',
    libraryTarget: 'umd',
    filename: 'CorsClient.js'
  },
  target: 'web',
  plugins: [],
  resolve: {
    alias: {
      'lodash': './utilities/lodash.custom'
    }
  },
  externals: {
    lodash: {
      commonjs: 'lodash',
      commonjs2: 'lodash',
      amd: 'lodash',
      root: '_'
    }
  }
}

此构建将省略 lodash 作为依赖项，并依赖实现者手动导入 lodash。这使得它非常适合作为依赖项导入到另一个已经拥有完整 lodash 或至少包含相同 lodash 函数的自定义 lodash 构建的项目中。