无法使用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命令与set环境变量一起运行。

当您添加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