Devhyun

메뉴

현재 화면 위치

데브현 메인 블로그 포스트

타이틀

Webpack에서 Node 환경변수 접근하기

2020.01.18
핫한

Webpack환경에서 Node의 환경변수에 저장된 프로퍼티에 접근해야 하는 경우가 있습니다.
제가 진행했던 프로젝트에서는 파일 및 이미지 업로드의 최대 용량을 .env파일에서 관리하였는데,
Webpack으로 번들링된 화면에서 검증 로직을 구현하기 위해 필요했습니다.

DefinePlugin

웹팩에서는 컴파일 시점에서 글로벌 변수로 사용할 수 있는 데이터를 설정할 수 있습니다.
바로 webpack의 DefinePlugin 입니다.

webpack.config.js에 plugins객체로 배열안에 DefinePlugin를 설정해주세요. 😊

📄 webpack.config.js

const webpack = require('webpack');

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      FILE_MAX_SIZE: 10,
      IMAGE_MAX_SIZE: 10,
    }),
  ],
};

이러면 번들링되는 JS파일에서 FILE_MAX_SIZE, IMAGE_MAX_SIZE 변수를 사용할 수 있습니다.
하지만 상수로 고정되어 있어 JS파일에서 Static 변수로 활용하는것과 큰 차이가 없습니다. 😭

자세한 내용은 아래의 공식문서를 참고해 주세요 🚀
https://webpack.js.org/plugins/define-plugin/

dotenv-webpack

Node 환경변수에 접근하기 위해서는 dotenv를 통해 .env파일의 정보를 읽어와 변수에 담아 사용해야 합니다.
Webpack에서 .env파일에 접근하려면 dotenv-webpack 라이브러리를 설치해야 합니다 !

npm i --save dotenv-webpack

먼저, 환경변수에 필요한 값을 담고

📄 .env

FILE_MAX_SIZE=10
IMAGE_MAX_SIZE=10

웹팩 설정파일을 수정해주세요

📄 webpack.config.js

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

const { NODE_ENV } = process.env;

const env = new dotenv({
  path: NODE_ENV === 'development' ? '.env.dev' : '.env',
}).definitions;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      FILE_MAX_SIZE: env['process.env.FILE_MAX_SIZE'],
      IMAGE_MAX_SIZE: env['process.env.IMAGE_MAX_SIZE'],
    }),
  ],
};

이제 Backend인 NodeJS와 Webpack을 통한 Front 환경에서도 같은 환경변수에 접근할 수 있습니다.
코드의 중복을 줄이고 수정에 유연하게 대처할 수 있게 되었네요 ⚡

마치며

일전에 소개했던 NodeJS 환경 변수 설정을 통해 개발환경과 운영환경을 분리하여 여러 상수를 관리한다면 더 유용하게 사용할 수 있습니다.

0개의 댓글

로그인을 하시면 댓글을 작성할 수 있어요 !
목록으로 가기