3

我们使用 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 编译并在编译完成后定义插件替换？因此，我们无需在编译时让 DefinePlugin 替换变量，而是只编译一次，然后再进行替换。

  2. 或者，有没有办法按条目定义插件？每个条目都有一个单独的 DefinePlugin 配置。

4

1 回答 1

1

您必须在编译过程中执行 webpack 对 DefinePlugin 所做的事情，原因很简单，DefinePlugin 所做的事情会影响包中的实际内容。

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

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

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

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

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

于 2016-11-27T16:12:32.313 回答