# 환경 변수 + HTML 구성

## 1. 환경 변수 구성

환경 변수(Environment Varialbles) 플러그인은 Webpack 패키지에 이미 포함되어 있습니다. `webpack` 모듈을 불러온 후 다음과 같이 플러그인을 구성합니다.

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

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

module.exports = (_env, argv) => {
  const isProd = argv.mode === 'production'
  const isDev = !isProd
  
  return {
    plugins: [
      // 환경 변수 플러그인 인스턴스 생성
      new webpack.EnvironmentPlugin({
        NODE_ENV: isDev ? 'development' : 'production'
      })
    ]
  }
}
```

{% endtab %}
{% endtabs %}

## 2. HTML 구성

[html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) 패키지를 프로젝트에 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i html-webpack-plugin -D
```

{% endtab %}
{% endtabs %}

`plugins`에 플러그인을 추가한 후, 옵션을 구성합니다.

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

```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = (_env, argv) => {
  // ...
  return {
    plugins: [
      // 플러그인 인스턴스 생성
      new HtmlWebpackPlugin({
        template: getAbsolutePath('public/index.html'),
        inject: true
      })
    ]
  }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
입맛에 맞는 HTML 문서를 동적으로 생성하려면 [HTML 커스텀 템플릿](https://yamoo9.gitbook.io/webpack/webpack/webpack-plugins/automatic-injection-to-html-document#custom-template) 문서를 참고합니다.
{% endhint %}