Webpack DefinePlugin 缓慢。还有其他选择吗？

Question

我们使用 Webpack DefinePlugin 为不同的渲染模式生成输出包。因此，例如，我们的 webpack 配置将返回

  [{
    entry: {
      mode1: "./input.es6",
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name]-bundle.js",
    },
    plugins: [
      new webpack.DefinePlugin({
        __RENDER_MODE__: 'mode1',
      }))
    ]
  },{
    entry: {
      mode2: "./input.es6",
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name]-bundle.js",
    },
    plugins: [
      new webpack.DefinePlugin({
        __RENDER_MODE__: 'mode2',
      }))
    ]
  }]

在代码中我们会做

if (__RENDER_MODE__ === 'mode1') {
  require('jquery-ui')
}

if (__RENDER_MODE__ === 'mode2') {
  require('other-lib')
}

这使我们能够生成针对每种渲染模式进行更优化的包。然而，随着渲染模式的增加，我们正在运行多个 webpack 编译，大大减慢了编译过程。我对解决这个问题有一些想法，想听听更多的意见:

1. 有没有一种方法可以使用 1 个单独的 webpack 编译并在编译完成后进行 define 插件替换？因此，我们不是在编译时让 DefinePlugin 替换变量，而是只编译一次，然后再进行替换。

2. 或者，有没有办法为每个条目做 DefinePlugin？每个条目都会有一个单独的 DefinePlugin 配置。

Answer 1

您必须在编译过程中执行 webpack 使用 DefinePlugin 执行的操作，原因很简单，因为 DefinePlugin 执行的操作会影响 bundle 中的实际内容。

如果您的代码中有以下内容:

if (__RENDER_MODE__ === 'mode1') {
  require('someLibrary').render();
}

webpack 会足够聪明，当条件不为真时，如果 IF 总是假的，并且 someLibrary 只有在实际可以使用时才会添加到您的包中。在缩小步骤之前使用 DefinePlugin 也很重要，因为死代码(与示例中相同)将被缩小器删除。

所以，简而言之，不，没有办法像 Def​​inePlugin 稍后所做的那样避免分别编译两个包。

关于你的第二个问题，不，不可能为每个条目单独定义插件，原因很简单，两个条目可能有共同的模块，这会导致冲突。执行此操作的唯一方法是使用两个单独的构建，正如您已经在做的那样。