환경 변수 + HTML 구성

1. 환경 변수 구성

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

webpack.config.js

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'
      })
    ]
  }
}

2. HTML 구성

html-webpack-plugin 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i html-webpack-plugin -D

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

webpack.config.js

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

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

입맛에 맞는 HTML 문서를 동적으로 생성하려면 HTML 커스텀 템플릿 문서를 참고합니다.