在源代码中使用 NODE_ENV 来控制 Webpack 的构建过程答案

【问题标题】：Use NODE_ENV in source code to control build process with Webpack在源代码中使用 NODE_ENV 来控制 Webpack 的构建过程
【发布时间】：2016-04-01 11:13:25
【问题描述】：

我正在我的项目中设置 Redux DevTools (https://www.npmjs.com/package/redux-devtools)，并希望在构建我的生产项目时排除 DevTools。文档说这可以通过使用以下代码来完成：

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

我已经有一个带有常量的模块，所以我把 NODE_ENV 的检查放在那里。

Constants.PRODUCTION = process.env.NODE_ENV === 'production'

在我的 Webpack 配置文件中，我有以下代码可以正常工作：

const production = process.env.NODE_ENV === 'production'

var config = {
  // configuration goes here
}

if (production) {
  config.plugins = [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
  ].concat(config.plugins)
}

运行set NODE_ENV=production&&webpack 时，构建会被缩小，而仅使用webpack 不会缩小构建。但是，在源代码本身中，NODE_ENV 是未定义的：

console.log(process.env.NODE_ENV) // Output: Undefined

如果我将我的Constants.PRODUCTION 设置为true，则构建中不包含 DevTools。不知何故，我应该使用 DefinePlugin 或 ProvidePlugin（Redux DevTools 文档都提到了它们，但在不同的地方），但我不知道怎么做。我正在使用 Windows 10、DevTools 3.0.0 和 npm 脚本来运行构建过程。谁能帮助我在我的 webpack 配置文件中设置 DefinePlugin 或 ProvidePlugin 吗？

【问题讨论】：

标签： javascript windows npm webpack redux-devtools

【解决方案1】：

我自己解决了；在 webpack 配置文件中我添加了这个：

plugins: [
  // Some other plugins
  new webpack.DefinePlugin({
      PRODUCTION: production,
  })
]

我将常量模块中的代码更改为

Constants.PRODUCTION = PRODUCTION

这行得通。现在，当运行我的 npm 脚本时，我得到了一个没有模块的构建，因为它在 uglifying 过程中被完全删除，我可以像以前一样启动 webpack 开发服务器，然后我加载了 Redux DevTools：

"scripts": {
  "start": "set NODE_ENV=development&&webpack-dev-server",
  "build": "set NODE_ENV=production&&webpack --progress --colors"
}

问题中的第一个代码 sn-p 现在如下所示：

if (Constants.PRODUCTION) {
  module.exports = require('./configureStore.prod');
} else {
  module.exports = require('./configureStore.dev');
}

【讨论】：

嗨@Oskar。我的情况完全一样。我正在尝试按照您的回答，但有些事情没有加起来。您能否提供更多详细信息，即您是如何定义 production 变量的。谢谢。
嗨@F.Gran！我在问题中有更多信息，production 变量设置为const production = process.env.NODE_ENV === 'production'。如果您需要更多帮助，请告诉我，希望我可以在答案中添加更多详细信息！
谢谢，@Osakr。我会将所有内容重新组合在一起，看看它是否有效。如果没有，并且您不介意，我会回信给您，提供我的配置文件的具体细节。非常感谢您的帮助！
别担心@F.Gran，我有完整的webpack.config.jshere。
@Osakr，我仍然无法让它工作。我已经尝试了一整天，我决定就此提出一个问题。我从 GitHub 尝试了你的代码，但我遇到了同样的问题。如果您可以查看here，我将不胜感激。

【解决方案2】：

基于webpack documentation。设置webpack -p 将执行以下操作

使用 UglifyJSPlugin 进行缩小
运行 LoaderOptionsPlugin
设置节点环境变量

因此，您只需设置 -p 标志，而不是手动设置 NODE_ENV。像这样的

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack -p --progress --colors"
}

【讨论】：