javascript - 在源代码中使用 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.PRODUCTION = PRODUCTION

那行得通。现在，当运行我的 npm 脚本时，我得到了一个没有模块的构建，因为它在 uglifying 期间被完全删除，我可以像以前一样启动 webpack 开发服务器，然后我加载了 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');
}