TIL
Webpack 환경 변수
한우콩
2023. 11. 26. 05:40
1️⃣ webpack cli 활용하기
webpack 커맨드라인 환경 옵션 --env를 사용하면 원하는 만큼 환경 변수를 전달할 수 있다.
환경 변수는 webpack.config.js에서 엑세스할 수 있다. package.json파일의 scripts섹션에서 아래와 같이 설정.
"scripts": {
"dev": "webpack-dev-server --env development --mode development",
"build": "webpack --mode production"
},- env 변수를 사용하려면 module.exports를 함수로 변환해야 한다.
module.exports = (env, { mode }) => {
const environment = env.NODE_ENV === 'development';
return {
// ... 기존 설정
};
};
+ package.json파일의 scripts에 NODE_ENV=development를 추가하면 Node.js 프로세스의 환경 변수로 설정된다.
"dev": "NODE_ENV=development webpack-dev-server --mode=development"
module.exports = () => {
console.log(process.env.NODE_ENV) // development
return {
// ... 기존 설정
};
};
❗️
webpack.config.js에서 mode를 설정하거나 cli에서 --mode=development를 사용할 경우 DefinePlugin의 process.env.NODE_ENV를 development로 설정한다. React app 내부에서 환경 변수 접근 가능
https://webpack.kr/configuration/mode/#usage
2️⃣ webpack.config.js에서 전역 상수 생성
EnvironmentPlugin, DefinePlugin을 사용하면 컴파일 타임에 구성할 수 있는 전역 변수를 만들 수 있다.
const webpack = require('webpack')
module.exports = {
// ...
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development'
})
]
}
+ webpack.EnvironmentPlugin 내부적으로 DefinePlugin을 사용하고 있으며, 아래의 코드와 동일하게 동작한다.
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
});3️⃣ dotenv 모듈을 통한 환경별 .env파일 사용하기
1. package.json 파일의 scripts 섹션에서 환경 변수 설정
// package.json script 설정
"NODE_ENV=development webpack-dev-server --mode development"
const dotenv = require('dotenv');
dotenv.config({ path: `.env.${process.env.NODE_ENV}` });
module.exports = {
// ... 기존 설정
};
2. webpack cli를 통한 env 파라미터를 통해 환경 별 설정가능
"webpack-dev-server --env development --mode development"
const dotenv = require('dotenv');
module.exports = (env, { mode }) => {
const environment = env.NODE_ENV;
dotenv.config({ path: `.env.${environment}` });
return {
// ... 기존 설정
};
};4️⃣ dotenv-webpack
dotenv-webpack은 dotenv와 Webpack.DefinePlugin을 포함한다.
DefinePlugin을 사용해 전역 변수를 생성하고 dotenv로 환경 변수를 로드한다.
plugins: [
new Dotenv({
path: path.resolve(__dirname, `.env.${process.env.NODE_ENV ?? 'local'}`),
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public/index.html'),
}),
],
참조
https://webpack.kr/guides/environment-variables/
https://webpack.kr/api/cli/#env
https://webpack.kr/configuration/configuration-types/#exporting-a-function