無法使用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