[ VanillaJS ] webpack5 - env

우리의 목표는 env.develop env.prod 두개의 환경변수를 사용하는 것.

개발용 fetch API URL와 배포용 URL이 다르기 때문이다.

env.development

API_BASE_URL=http://localhost:3000

env.production

API_BASE_URL=https://fe-w23-shoppinghow.herokuapp.com

dotenv

Node에서 env를 설정할 때 사용하는 라이브러리이다.

yarn add -D dotenv

각 webpack 모드에서 해당 env파일을 가져오자.

require('dotenv').config({ path: '.env.production' });
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
    }),
    new webpack.EnvironmentPlugin(['API_BASE_URL']),
  ]
}

DefinePlugin은 빌드타임에서 모든 JS 코드에서 접근이 가능한 전역 상수를 선언한다.
EnvironmentPlugin은 process.env 키에 DefinePlugin을 간단히 적용할 수 있다.

하지만 일일이 env 변수를 복사하는 건 너무 귀찮다...

플러그인을 통해서 env파일을 통채로 불러오자.

dotenv-webpack

yarn add -D dotenv-webpack

const Dotenv = require('dotenv-webpack');

module.exports = {
  // ...
  plugins: [
    new Dotenv({ path: '.env.development' }),
  ]
}

편안 🎉

아래와 같이 즉석으로 process.env에 변수를 선언할 수 있다.

  plugins: [
    new Dotenv({ path: '.env.development' }),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
      DEBUG: true,
    }),
  ]

NODE_ENV은 사실 webpack에서 디폴트로 설정해준다.
mode가 production이면 production, development이면 development.

DEBUG 변수를 통해서 true일 때 디버깅용 console.log를 보여주도록할 수 있다.

참고

• https://falsy.me/dotenv를-사용한-nodejs-환경변수-설정과-webpack-번들로-환경변수-전/
• https://www.daleseo.com/webpack-plugins-define-environment/