Webpack.config.js process.env.NODE_ENV无法正常工作。 -ReactJS-

Question

I have next Webpack.config.js:

'use strict';

const WEBPACK = require('webpack');
const PATH = require('path');
const CopyFiles = require('copy-webpack-plugin');
const BaseName = "/upct";

const CONFIG = {
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    context: __dirname,
    entry: {
        app: ['./src/index.jsx']
    },
    /*
    output: {
        path: PATH.join(__dirname, '/public'),
        /*path: './public',*//*
        publicPath: BaseName+'/',
        filename: 'index.js'
    },
    /*
    devServer: {
        host: 'localhost',
        port: 3000,
        contentBase: PATH.join(__dirname, '/public'),
        inline: true,
        historyApiFallback: true,
        headers: { 
            "Access-Control-Allow-Origin": "*" 
        }
    },
    */
    module: {
        loaders: [
            {
                test: /(\.js|.jsx)$/,
                loader: 'babel',
                query: {
                    "presets": [
                        "es2015",
                        "react",
                        "stage-0"
                    ],
                    "plugins": [
                        "react-html-attrs",
                        "transform-decorators-legacy",
                        "transform-class-properties"
                    ]
                }
            }
        ]
    },
    plugins: [
        new WEBPACK.DefinePlugin({
            BASENAME: JSON.stringify(BaseName),
            'process.env': {
                /*'NODE_ENV': JSON.stringify(process.env.NODE_ENV)*/
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ]
}

if (process.env.NODE_ENV === 'production') {
    CONFIG.output = {
        path: PATH.join(__dirname, '/publicProduction'),
        publicPath: BaseName+'/',
        filename: 'index.js'
    };

    CONFIG.plugins.push(
        new WEBPACK.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                screw_ie8: true,
                warnings: false
            },
            comments: false
        })
    );
    //babelSettings.plugins.push("transform-react-inline-elements");
    //babelSettings.plugins.push("transform-react-constant-elements");

} else {
    //CONFIG.devtool = "#cheap-module-source-map"
    CONFIG.output = {
        path: PATH.join(__dirname, '/publicDeveloping'),
        publicPath: BaseName+'/',
        filename: 'index.js'
    };

    CONFIG.devServer = {
        host: 'localhost',
        port: 3000,
        contentBase: PATH.join(__dirname, '/src'),
        inline: true,
        historyApiFallback: true,
        headers: { 
            "Access-Control-Allow-Origin": "*" 
        }
    }
    /*
    CONFIG.plugins.push(
        new webpack.HotModuleReplacementPlugin()
    );*/
}

module.exports = CONFIG;

and next scripts:

"scripts": {
    "build": "SET NODE_ENV='building' && webpack --progress --watch --colors",
    "serve": "SET NODE_ENV='testing' && webpack-dev-server --progress --colors",
    "production": "SET NODE_ENV='production' && webpack --progress -p"
  },

But never into in IF (when I run npm run production ), always into in ELSE (Run the script that I run). Why could it be? (above I have declared NODE_ENV = 'production', I do not understand why it is not working...).

Thank you.

Answer 1

I used to have the same kind of problem. Try trimming the string first and then comparing it.

if (process.env.NODE_ENV.trim() === 'production') {
    // Do Something
}

1 more thing, the -p flag for webpack and SET NODE_ENV=production are basically the same thing so I don't think you need them both.

Answer 2

You might want to try: SET NODE_ENV=production webpack --progress

If you care about cross platform, you might want to try npm package cross-env .

Once you install package cross-env , you would change your script to look like:

Your script would change to cross-env NODE_ENV=production webpack --progress

Answer 3

Just another thought. You can try this,

"production": "webpack -p"

and in webpack config file

const PROD_ENV = process.argv.indexOf('-p');

and using ternary condition

...PROD_ENV ? [prod settings] : [other settings]

or using if condition

if(PROD_ENV > 0) {
  ...prod settings
} else {
  ...other settings
}