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 ='生产'，我不明白为什么它不起作用......）。

谢谢。

Answer 1

我曾经遇到过同样的问题。首先尝试修剪字符串然后进行比较。

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

还有一件事，-p和webpack的{{1}}标志基本相同，所以我认为你不需要它们。

Answer 2

您可能想尝试： SET NODE_ENV=production webpack --progress

如果您关心跨平台，可能需要尝试npm包cross-env。

安装包cross-env后，您可以将脚本更改为：

您的脚本将更改为cross-env NODE_ENV=production webpack --progress

Answer 3

只是另一个想法。你可以试试这个，

"production": "webpack -p"

并在webpack配置文件中

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

并使用三元条件

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

或使用if条件

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

Webpack.config.js process.env.NODE_ENV不是workinkg。 - ReactJS -

3 个答案: