[javascript] Webpack으로 환경변수 설정하기

29 Nov 2023

javascript

웹 개발에서 환경변수는 매우 중요한 요소입니다. 배포환경(deployment environment)에 따라 다른 설정 값을 사용해야 할 때, 환경변수를 사용하여 쉽게 설정할 수 있습니다. 이를 가능하게 하는 도구 중 하나가 Webpack입니다. Webpack을 사용하여 환경변수를 설정하는 방법을 알아보겠습니다.

환경변수 설정하기

.env 파일 생성하기

프로젝트 루트 디렉토리에 .env 파일을 생성합니다. 이 파일에는 환경변수를 설정할 값들을 저장합니다. 예를 들어, API_URL이라는 환경변수를 설정하고 싶다면 다음과 같이 .env 파일에 작성합니다.
```
API_URL=https://api.example.com
```
위 예제에서는 API_URL이라는 환경변수를 https://api.example.com 값으로 설정했습니다.
Webpack 설정 파일 수정하기

프로젝트 루트 디렉토리에 있는 webpack.config.js 파일을 엽니다. Webpack 설정 파일에 환경변수를 적용하려면, dotenv-webpack 패키지를 설치해야 합니다.
```
npm install dotenv-webpack --save-dev
```
dotenv-webpack 패키지를 설치하면 webpack.config.js 파일에서 환경변수를 사용할 수 있습니다. Webpack 설정 파일에서 다음과 같이 dotenv-webpack 패키지를 추가합니다.
```
require('dotenv-webpack').config();
```
그리고 환경변수를 사용하려는 곳에서 process.env 객체를 통해 값을 참조할 수 있습니다. 예를 들어 API_URL을 사용하려면 다음과 같이 코드를 작성합니다.
```
const apiUrl = process.env.API_URL;
```
이제 Webpack을 실행하면 설정한 환경변수 값을 사용할 수 있습니다.

결론

Webpack을 사용하여 환경변수를 설정하는 방법을 알아보았습니다. .env 파일을 생성하여 원하는 환경변수를 설정하고, Webpack 설정 파일에서 dotenv-webpack 패키지를 사용하여 환경변수를 적용했습니다. 이를 통해 개발과 배포 환경에서 다른 설정 값을 사용할 수 있으며, 웹 개발에 유용한 기능을 활용할 수 있습니다.

환경변수 설정하기

결론

참고 자료