Jello's development blog

Jello's development blog

webpack으로 development, product 환경 세팅하기

웹 서비스를 개발할 때, 개발(development)모드배포(production)모드에 따라 다른 결과가 나와야 하는 경우가 많다. 예를 들면, 내가 요청할 API 서버의 주소가, 내 컴퓨터에서 개발중일 때와 서버에 올라갔을 때가 다를 수 있다. 또 개발중인 코드에서 보여주지 말아야 할 에러 메시지가 있을 수도 있고, 캐싱의 여부가 다를 수도 있다. 단순하게 페이지의 내용을 다르게 하고 싶을 수도 있다.

보통 이러한 문제들을 해결하기 위해서, Node.js에서는 NODE_ENV라는 환경변수를 설정하여,

if( process.env.NODE_ENV == 'production' ) {
	console.log("Production Mode");
} else if( process.env.NODE_ENV == 'development' ){
	console.log("Development Mode");
}

위와 같은 방식으로 모드에 따라 코드를 알맞게 분기한다. 반드시 production, development두 가지의 모드만 있을 필요는 없고, 개발자의 재량에 따라서 여러 가지 만들 수 있다.

NODE_ENV를 설정하는 방법은 POSIX 호환 운영체제의 경우,

$ export NODE_ENV=production

이런 식으로 환경 값을 설정할 수 있다.
Windows의 경우에는 Node.js를 구동할 때,

> set NODE_ENV=production

이런 식으로 환경 값을 설정할 수 있다.

webpack으로 만든 웹페이지의 경우에는 어떻게 해야할까? 감사하게도 webpack(2.2.1 기준)은 DefinePluginUglifyJsPlugin이라는 플러그인을 지원하고 있다. DefinePlugin은 컴파일할 코드에서 특정 문자열을 설정한 값으로 치환해주는 기능을 하고, UglifyJsPlugin은 컴파일한 결과 코드의 용량을 줄이고 읽기 어렵게 만드는 역할을 한다.

const webpack = require('webpack');

module.exports = {
  /*...*/
  plugins:[
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: options.devtool && (options.devtool.indexOf("sourcemap") >= 0 || options.devtool.indexOf("source-map") >= 0)
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

설정 파일(webpack.config.js)에 다음과 같이 설정할 수도 있고,

$ webpack --optimize-minimize --define process.env.NODE_ENV="'production'"
(equal with)
$ webpack -p

이렇게 명령어에서 옵션으로 주는 방법도 있다.

추가로 react 내부에서 모드를 분기하는 변수(문자열)로 process.env.NODE_ENV가 아닌 다른 변수(문자열)을 사용하게 되면, production 모드로 설정하더라도 이를 인식하지 못하고, react관련 경고 메시지가 브라우저의 콘솔에 표시되는 등 development 모드로 인식하는 것 같다. 그러니 안정성과 다른 개발자들의 가독성을 위해서 process.env.NODE_ENV를 사용하는 것을 추천한다.