用 webpack 去掉 __DEV__ [重复]答案

【问题标题】：strip out __DEV__ with webpack [duplicate]用 webpack 去掉 __DEV__ [重复]
【发布时间】：2018-06-08 04:21:21
【问题描述】：

如果我有这样的 if 语句：

if(__DEV__) {
  // do stuff
}

有没有办法使用 webpack 去除这些 if 语句块？

毫不含糊地，或者我是否在这个问题的任何地方声明我想引用环境变量。

将其标记为重复 RTFQ 的学究可以吗？

【问题讨论】：

见github.com/petehunt/webpack-howto#6-feature-flags
@Louis 这是完全不同的。我在哪里问如何引用环境变量？我在问如何去掉 DEV_。
@dagda1 你得到的一个答案是对另一个问题的答案的重新散列。 Felix Kling 的链接指向一个页面，该页面可能是另一个问题的答案。所以，是的，证据表明你的问题是重复的。也许您对另一个问题标题中的“环境”一词读得太多了。通常，这意味着您的“构建环境”。人们经常使用process.env（进程环境变量），但这不是必需的。有时你想要__DEV__ 那里，有时你想要它被淘汰。您的构建环境决定了这一点。
@dagda1 DefinePlugin 可用于更改任何变量。变量来自哪里完全无关紧要。如果您愿意，您可以更改第三方库的内部变量。
Webpack 永远不会剥离那些代码块。您可以使用DefinePlugin 将__DEV__“硬编码”为常量（如true 或false），因此代码最终看起来像if (false) { /* ... */ }，这意味着大括号内的任何内容都是死代码。 Webpack 不会消除这些，因为您很可能希望在开发时看到生成的代码。另一方面，UglifyJS 将在缩小期间消除死代码，但此过程仅适用于生产构建（例如运行 webpack -p 或其他内容时，具体取决于您使用的 Webpack 版本）。

标签： javascript webpack

【解决方案1】：

你可以在你的 webpack 配置中定义一个插件。在您的配置中，您需要添加这样的插件：

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
    })
  ]
}

通过这样做，您会将所有对 __DEV__ 的引用替换为 BUILD_DEV 环境变量的值。

由于您在使用 webpack 构建时可能已经设置了 NODE_ENV，因此您可以利用它。这是使用NODE_ENV的另一种方式：

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production'
    })
  ]
}

正如@Felix Kling 在评论中提到的，您还可以使用这种技术来定义多个功能标志，如下所示：https://github.com/petehunt/webpack-howto#6-feature-flags

如果您在NODE_ENV=production 处进行构建，您将获得无效代码。我相信当你运行你的缩小工具时，这个死代码会被删除。见这里：https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems-fb8512c86edf

【讨论】：