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 
} 

한 가지 더, webpack 및 SET NODE_ENV=production에 대한 -p 플래그는 기본적으로 그래서 당신이 둘 필요가 있다고 생각하지 않습니다 같은 일이다.

Answer 2

당신은 시도 할 수 있습니다 : SET NODE_ENV=production webpack --progress

당신이 크로스 플랫폼에 관심 있다면, 당신은 npm 패키지 cross-env을 시도 할 수도 있습니다.

스크립트가 cross-env NODE_ENV=production webpack --progress

Answer 3

그냥 다른 생각으로 변경됩니다 : 당신이 패키지 cross-env를 설치하면

, 당신처럼 보이도록 스크립트를 변경합니다. 당신은 조건

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