[javascript] dotenv 사용해보기 with webpack

dotenv란?

• .env라는 파일에서 변수를 불러와서 process.env에 변수를 삽입해주는 패키지
• 웹팩의 DefinePlugin과 함께 사용하면, 빌드된 파일에 환경 변수를 주입할 수 있다.

설치

npm install --save dotenv

활용법

• 프로젝트의 root 디렉터리에 .env 파일 생성 후 환경 변수 선언

// .env
API_KEY="123"

• webpack.config.js 파일에서 DefinePlugin 설정

// webpack.config.js
require('dotenv').config();

module.exports = {
  ...
  plugins: [
    ...
    new webpack.DefinePlugin({
      // .env 파일의 API_KEY 값을 API_KEY 환경 변수로 삽입
      API_KEY: JSON.stringify(process.env.API_KEY),
    }),
    ...
  ],
  ...
};    

• 환경 변수 사용하기

// index.js
console.log(API_KEY) // "123"

---

참고 자료
DaleSeo: dotenv로 환경 변수 관리하기

읽어 주셔서 감사합니다 :)
잘못된 부분이 있다면 댓글로 편히 알려주세요