# 환경 변수 등록

## 환경 변수 플러그인 <a href="#env-variables" id="env-variables"></a>

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

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

{% hint style="danger" %}
환경 변수를 등록하지 않을 경우, process.env.NODE\_ENV는 "정의 되지 않음"이므로 오류를 발생시킵니다.
{% endhint %}

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

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
const webpack = require('webpack')

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

{% endtab %}
{% endtabs %}

{% hint style="info" %}
EnvironmentPlugin은 내부적으로 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)을 사용하기에 위에 작성한 코드는 아래와 동일합니다.

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

{% endhint %}

## 명령어 설정 <a href="#setting-npm-script-commands" id="setting-npm-script-commands"></a>

환경 변수 등록 후에 프로젝트 패키지 관리 파일인 `package.json` 파일에 다음과 같이 [NPM 스크립트](https://docs.npmjs.com/cli/v7/using-npm/scripts)를 추가하면  손쉽게 명령을 실행해 원하는 모드에 따라 번들링, 워치, 빌드를 수행할 수 있습니다.

{% tabs %}
{% tab title="package.json" %}

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

{% endtab %}
{% endtabs %}

### 번들 <a href="#bundle" id="bundle"></a>

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

```bash
npm run bundle
```

### 워치 <a href="#watch" id="watch"></a>

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

```bash
npm run watch
```

### 빌드 <a href="#build" id="build"></a>

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

```bash
npm run build
```

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://webpack.js.org/plugins/environment-plugin/>" %}