Can't Set NODE_ENV to production with webpack

Question

I'm using webpack 2.2.1 to build a react-redux app for production, but can't seem to set process.env.NODE_ENV to production.

Here is 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: './'
  }
};

And here are my scripts in package.json:

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

When I run npm run build, my bundle.js is compiled but it's not for production. In my webpack.config.js, I replaced the option for the DefinePlugin to 'process.env.NODE_ENV': '"production"' and it worked. So I'm thinking there is something wrong with my package.json file, but I can't figure out what it is.

Answer 1

You are running two processes with your build command npm run clean and webpack -p. When you add NODE_ENV=production in front, it only applies to the current process. In you example, NODE_ENV=production npm run clean && webpack -p, only the clean command runs with the set environment variable.

When you add export NODE_ENV=production it will set it for all processes you start from that terminal. Keep this in mind because everything else you run from that same terminal window will have NODE_ENV=production set.

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

If you don't want to have NODE_ENV=production to stick for other processes, then add NODE_ENV=production in front of both processes:

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