webpack定义了慢缓慢.其他选择

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编译并在编译完成后定义插件更换？因此，我们没有在汇编时定义变量代替变量，而是只进行一次编译，然后进行替换。

2. 或，每个条目有没有办法来定义Plugin？每个条目将具有单独的DefinePlugin配置。

Answer 1

您必须在编译过程中执行WebPack对DefinePlugin进行的操作，原因很简单，因为DefinePlugin所做的工作可以影响捆绑包中的实际内容。

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

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

webpack将足够聪明，可以看到条件不正确时始终是错误的，并且只有在实际使用时，只有someLibrary才会添加到您的捆绑包中。在缩小步骤之前使用DefinePlugin也很重要，因为缩影将由minifier删除。

将删除。

因此，简而言之，不，没有办法执行DefinePlugin稍后做的事情，以避免分别编译两个捆绑包。

在您的第二个问题上，不，每个条目都无法单独的定义普通素，出于简单的原因，两个条目都可能具有共同的模块，这将导致冲突。唯一的方法是使用两个单独的构建，就像您已经在这样做一样。