javascript - Webpack.config.js process.env.NODE_ENV 不起作用。 -ReactJS-

Question

我有下一个 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;

和下一个脚本:

"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"
  },

但永远不要进入 IF (当我运行 npm run production 时)，总是进入 ELSE (运行我运行的脚本)。为什么会这样？ (上面我已经声明了 NODE_ENV = 'product'，我不明白为什么它不起作用......)。

谢谢。

Answer 1

我以前也遇到过同样的问题。尝试先 trim 字符串，然后进行比较。

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

还有一件事，webpack 的 -p 标志和 SET NODE_ENV=product 基本上是同一件事，所以我不认为你两者都需要。