환경 변수 등록

환경 변수 플러그인

EnvironmentPlugin 플러그인은 process.env 객체의 키(key)를 사용자가 등록할 때 사용합니다. 예를 들어 process.env.NODE_ENV 값을 확인하여 "개발" 또는 "배포" 모드 임을 감지하고자 합니다.

const isDevMode = process.env.NODE_ENV.includes('dev')

환경 변수를 등록하지 않을 경우, process.env.NODE_ENV는 "정의 되지 않음"이므로 오류를 발생시킵니다.

Webpack은 기본적으로 process.env.NODE_ENV 값을 제공하지 않기 때문에 사용자가 값을 등록해 사용할 수 있습니다. 등록하는 방법은 다음과 같습니다.

webpack.config.js

const webpack = require('webpack')

module.exports = {
  // 플러그인 설정
  plugins: [
    // 환경 변수 등록/관리 설정
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ]
}

EnvironmentPlugin은 내부적으로 DefinePlugin을 사용하기에 위에 작성한 코드는 아래와 동일합니다.

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('development')
});

명령어 설정

환경 변수 등록 후에 프로젝트 패키지 관리 파일인 package.json 파일에 다음과 같이 NPM 스크립트를 추가하면 손쉽게 명령을 실행해 원하는 모드에 따라 번들링, 워치, 빌드를 수행할 수 있습니다.

package.json

"scripts": {
  "bundle": "NODE_ENV=development webpack",
  "watch": "NODE_ENV=development webpack -w",
  "build": "NODE_ENV=production webpack"
}

번들

개발(development) 모드로 1회 컴파일 및 번들링을 수행합니다.

npm run bundle

워치

개발(development) 모드로 컴파일 및 번들링을 수행하며, 파일이 수정/저장 될 때마다 번들링을 수행합니다.

npm run watch

빌드

배포(production) 모드로 컴파일 및 번들링을 수행하며 최적화가 적용된 결과물이 출력됩니다.

npm run build

참고

EnvironmentPlugin | webpackwebpack