웹팩은 웹 애플리케이션의 번들링을 쉽게 해주는 도구입니다. 타입스크립트와 함께 사용할 때, 환경 변수를 다루는 방법이 중요한데 이를 어떻게 하는지 살펴보겠습니다.

환경 변수 설정

먼저, 타입스크립트 애플리케이션에서 환경 변수를 설정하는 방법에 대해 알아봅시다. 보통 .env 파일을 통해 환경 변수를 관리하는데, 이를 위해서는 dotenv 패키지를 설치해야 합니다.

npm install dotenv --save-dev

그리고 .env 파일을 만들어서 변수를 설정합니다.

API_URL=https://example.com/api
DEBUG=true

웹팩 설정

이제 웹팩 설정 파일에서 환경 변수를 사용할 수 있도록 설정해야 합니다. 먼저, dotenv 패키지를 사용하여 .env 파일을 읽을 수 있도록 webpack.config.js 파일을 수정합니다.

require('dotenv').config();

환경변수를 사용하고자 하는 타입스크립트 파일에서는 process.env 객체를 통해 환경 변수에 접근할 수 있습니다.

console.log(process.env.API_URL);

다음으로, webpack.config.js 파일에서 DefinePlugin을 사용하여 환경 변수를 전역 변수로 설정합니다.

const webpack = require('webpack');

module.exports = {
  //... 다른 설정들
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  ]
};

이제 환경 변수를 타입스크립트 코드 내에서 사용할 수 있게 되었습니다.

결론

웹팩을 사용하여 타입스크립트 애플리케이션에서 환경 변수를 설정하고 사용하는 방법에 대해 알아보았습니다. 이를 통해 애플리케이션을 개발하거나 배포할 때 환경 변수를 쉽게 관리할 수 있습니다.

참고문헌:

• Dotenv 패키지 공식 문서
• Webpack DefinePlugin 공식 문서