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

Question

我正在我的项目中设置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？

Answer 1

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

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

我将Constants模块中的代码更改为

Constants.PRODUCTION = PRODUCTION

这很有效。 现在，在运行我的npm脚本时，我得到了一个没有模块的构建，因为在uglifying期间完全删除了它，我可以像以前一样启动webpack dev服务器，然后我加载了Redux DevTools：

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

问题中的第一个代码片段现在看起来像这样：

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

Answer 2

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

• 使用UglifyJSPlugin进行缩小
• 运行LoaderOptionsPlugin
• 设置Node环境变量

因此，您需要做的就是设置-p标志，而不是手动设置NODE_ENV。 像这样的东西

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