Dotenv
dotenv 옵션은 .env 파일에서 webpack의 내장 환경 변수를 로드하는 기능을
활성화합니다. ## dotenv
boolean object
.env 파일에서 환경 변수를 로드하기 위해 내장된 Dotenv 플러그인을 활성화하고 구성합니다.
webpack.config.js
module.exports = {
//...
dotenv: true,
};dotenv를 true로 설정하면 기본 옵션으로 플러그인이 활성화됩니다. 사용자 지정 구성의 경우 옵션 객체를 전달하세요.
module.exports = {
//...
dotenv: {
prefix: 'WEBPACK_',
dir: true,
template: ['.env', '.env.local', '.env.[mode]', '.env.[mode].local'],
},
};Options
prefix
string string[]
Default: 'WEBPACK_'
지정된 접두사로 시작하는 환경 변수만 노출합니다. 이렇게 하면 민감한 변수가 실수로 노출되는 것을 방지할 수 있습니다.
webpack.config.js
module.exports = {
//...
dotenv: {
prefix: 'APP_', // APP_* 변수만 노출합니다.
},
};Multiple prefixes:
module.exports = {
//...
dotenv: {
prefix: ['APP_', 'CONFIG_'], // APP_* 및 CONFIG_* 변수를 모두 노출합니다.
},
};dir
boolean string
Default: true
.env 파일이 로드되는 디렉터리입니다.
true- 프로젝트 루트에서 로드합니다(컨텍스트).false-.env파일 로드를 비활성화합니다.string- 프로젝트 루트로부터의 상대 경로 또는 절대 경로
webpack.config.js
module.exports = {
//...
dotenv: {
dir: './config', // ./config 디렉토리에서 로드
},
};Disable loading:
module.exports = {
//...
dotenv: {
dir: false, // process.env 변수만 사용하세요
},
};template
string[]
기본값: ['.env', '.env.local', '.env.[mode]', '.env.[mode].local']
.env 파일 이름에 대한 템플릿 패턴입니다. [mode]를 webpack 모드의 자리 표시자로 사용하세요(예: development, production).
파일은 지정된 순서대로 로드되며, 나중에 로드된 파일이 이전 파일보다 우선합니다.
webpack.config.js
module.exports = {
//...
mode: 'production',
dotenv: {
template: ['.env', '.env.production'], // 이 두 파일만 로드하세요
},
};Custom patterns:
module.exports = {
//...
dotenv: {
template: [
'.env',
'.env.local',
'.env.[mode]',
'.env.[mode].local',
'.env.override', // Always loaded last
],
},
};File Priority
환경 파일은 순서대로 로드되며, 나중에 로드된 파일이 더 높은 우선순위를 갖습니다.
.env- 모든 모드에서 로드됨.env.local- 모든 모드에서 로드되며, git에서 무시됨(규칙).env.[mode]- 지정된 모드에서만 로드됨(예:.env.production).env.[mode].local- 지정된 모드에서만 로드되며, git에서 무시됨
이후 파일의 변수는 이전 파일의 변수보다 우선합니다. 또한, process.env에 이미 설정된 변수가 가장 높은 우선순위를 갖습니다.
Variable Expansion
환경 변수는 dotenv-expand 구문을 사용하여 자동으로 확장됩니다.
.env
WEBPACK_API_BASE=https://api.example.com
WEBPACK_API_URL=${WEBPACK_API_BASE}/v1
WEBPACK_PORT=${WEBPACK_PORT:-3000} # process.env 또는 3000을 기본값으로 사용하는 WEBPACK_PORT코드에서:
console.log(process.env.WEBPACK_API_URL); // "https://api.example.com/v1"
console.log(process.env.WEBPACK_PORT); // process.env에서 WEBPACK_PORT를 사용하거나 기본값으로 3000을 사용합니다.Expansion behavior example:
# .env 파일
WEBPACK_API_URL=${API_BASE:-https://default.com}/api# 환경 변수와 함께 실행
API_BASE=https://custom.com npm run build결과: process.env.WEBPACK_API_URL은 "https://custom.com/api"가 됩니다. 이는 확장 중에 process.env의 API_BASE가 사용되기 때문입니다. 그러나 API_BASE 자체는 번들에 노출되지 않습니다(WEBPACK_ 접두사가 없음).
Usage Examples
Basic Usage
프로젝트 루트에 .env 파일을 만듭니다.
.env
WEBPACK_API_URL=https://api.example.com
WEBPACK_FEATURE_FLAG=true
SECRET_KEY=should-not-be-exposed # 노출되지 않음 (WEBPACK_ 접두사가 없기 때문에)webpack.config.js
module.exports = {
//...
dotenv: true, // 기본 접두사 "WEBPACK_"를 사용합니다.
};In your application:
console.log(process.env.WEBPACK_API_URL); // "https://api.example.com"
console.log(process.env.WEBPACK_FEATURE_FLAG); // "true"
console.log(process.env.SECRET_KEY); // 정의되지 않음(노출되지 않음)Mode-Specific Configuration
모드별 파일을 만듭니다.
.env
WEBPACK_API_URL=https://api.example.com
WEBPACK_DEBUG=false.env.production
WEBPACK_API_URL=https://prod-api.example.com
WEBPACK_DEBUG=false.env.development
WEBPACK_API_URL=https://dev-api.example.com
WEBPACK_DEBUG=true--mode production으로 빌드하는 경우 WEBPACK_API_URL은 "https://prod-api.example.com"이 됩니다.
Multiple Prefixes
다른 접두사를 사용하여 변수를 노출합니다.
.env
APP_NAME=MyApp
APP_VERSION=1.0.0
CONFIG_TIMEOUT=5000
CONFIG_RETRY=3
PRIVATE_KEY=secret # 노출되지 않음webpack.config.js
module.exports = {
//...
dotenv: {
prefix: ['APP_', 'CONFIG_'],
},
};Custom Directory and Template
사용자 정의 이름을 사용하여 사용자 정의 위치에서 환경 파일을 로드합니다.
webpack.config.js
module.exports = {
//...
dotenv: {
dir: './environments',
template: ['.env.base', '.env.[mode]'],
},
};이렇게 하면 다음이 로드됩니다.
./environments/.env.base./environments/.env.production(production 모드인 경우)
Security Considerations
.gitignore를 사용하여.env.local및.env.[mode].local파일을 제외합니다.- 특정 접두사가 있는 환경 변수만 노출합니다.
- 빈 문자열
''를 접두사로 사용하지 마세요. - 환경마다 다른
.env파일을 사용하는 것을 고려하세요. - 프로덕션 시크릿은 배포 플랫폼의 환경 변수에 저장합니다.
.gitignore
# 로컬 env 파일들
.env.local
.env.*.localFurther Reading
1 Contributor
