在源代碼中使用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"
}