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

Question

我使用的WebPack 2.2.1建立用于生产反应,终极版的应用程序,但似乎无法设置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