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个单一的webpack编译，并在编译完成后定义插件替换？因此，我们只编译一次然后再进行替换，而不是在编译时使用DefinePlugin替换变量。
或者，有没有办法为每个条目生成DefinePlugin？每个条目都有一个单独的DefinePlugin配置。

Answer 1

你必须在编译过程中执行webpack对DefinePlugin的处理，原因很简单，DefinePlugin的作用会影响bundle中的实际内容。

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

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

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

所以，简而言之，不，没有办法去做以后的DefinePlugin做的事情，以避免单独编译这两个包。

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

Webpack DefinePlugin缓慢。还有其他选择

1 个答案: