无法使用 webpack 将 NODE_ENV 设置为生产环境

Question

我正在使用 webpack 2.2.1 构建一个用于生产的 react-redux 应用，但似乎无法将 process.env.NODE_ENV 设置为 production。

这里是 webpack.config.js：

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const VENDOR_LIBS = [
  'axios', 'lodash', 'react', 'react-dom', 'react-redux',
  'react-router', 'redux', 'redux-form', 'redux-thunk'
];

module.exports = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

这是我在 package.json 中的脚本：

"scripts": {
   "clean": "rimraf dist",
    "build": "NODE_ENV=production npm run clean && webpack -p",
    "serve": "webpack-dev-server"
}

当我运行 npm run build 时，我的 bundle.js 已编译，但它不适用于生产。在我的 webpack.config.js 中，我将 DefinePlugin 的选项替换为 'process.env.NODE_ENV': '"production"' 并且它起作用了。所以我认为我的 package.json 文件有问题，但我无法弄清楚它是什么。

Answer 1

您正在使用构建命令npm run clean 和webpack -p 运行两个进程。前面加上NODE_ENV=production时，只适用于当前进程。在您的示例中，NODE_ENV=production npm run clean && webpack -p，只有 clean 命令使用设置的环境变量运行。

当您添加export NODE_ENV=production 时，它将为您从该终端启动的所有进程设置它。请记住这一点，因为您从同一终端窗口运行的所有其他内容都将设置NODE_ENV=production。

$ npm run build
> NODE_ENV=production npm run clean && webpack -p
...
$ echo $NODE_ENV
production

如果您不想让NODE_ENV=production 坚持其他进程，请在两个进程前添加NODE_ENV=production：

NODE_ENV=production npm run clean && NODE_ENV=production webpack -p