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; 

と、次のスクリプト：常にへのELSEでIF（私はnpm run productionを実行する）、（ファイル名を指定して実行中に

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

しかし決してを私が動かすスクリプト）。なぜそれができますか？ （私はNODE_ENV = 'production'を宣言していますが、なぜそれが動作していないのか理解できません...）。

ありがとうございます。

Answer 1

以前は同じ種類の問題がありました。最初に文字列をトリミングして比較してみてください。

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

1つのより多くの事、webpackとSET NODE_ENV=productionため-pフラグは、基本的に私はあなたがそれらの両方を必要としないと思う同じことです。

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'); 

とOSがあなたのしている状態

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