EnvironmentPlugin

EnvironmentPlugin을 사용해 process.env 키에 DefinePlugin을 간단히 적용할 수 있습니다.

Usage

EnvironmentPlugin은 키로 구성된 배열 혹은 키에 기본값이 매핑된 객체를 받습니다.

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

이는 다음과 같은 DefinePlugin 적용과 동일합니다.

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
});

Usage with default values

또는, EnvironmentPlugin은 키에 기본값을 매핑한 객체를 지원합니다. 키가 process.env에 정의되지 않은 경우에는 기본값을 사용합니다.

new webpack.EnvironmentPlugin({
  NODE_ENV: 'development', // process.env.NODE_ENV가 정의되지 않은 경우 'development'를 사용하세요.
  DEBUG: false,
});

Example:

지금까지 구성해온 EnvironmentPlugin 설정을 테스트 파일 entry.js에 적용했을 때 어떻게 동작하는지 알아봅시다.

if (process.env.NODE_ENV === 'production') {
  console.log('Welcome to production');
}
if (process.env.DEBUG) {
  console.log('Debugging output');
}

빌드하기 위해 터미널에서 NODE_ENV=production webpack을 실행했을 때 entry.js는 다음과 같습니다.

if ('production' === 'production') {
  // <-- NODE_ENV의 'production'이 사용됩니다.
  console.log('Welcome to production');
}
if (false) {
  // <-- 기본값이 사용됩니다.
  console.log('Debugging output');
}

DEBUG=false webpack을 실행하면 다음과 같습니다.

if ('development' === 'production') {
  // <-- 기본값이 사용됩니다.
  console.log('Welcome to production');
}
if ('false') {
  // <-- DEBUG의 'false'가 사용됩니다.
  console.log('Debugging output');
}

Use Case: Git Version

다음과 같은 EnvironmentPlugin 설정은 저장소의 마지막 커밋에 따른 process.env.GIT_VERSION (예시 "v5.4.0-2-g25139f57f")과 process.env.GIT_AUTHOR_DATE (예시 "2020-11-04T12:25:16+01:00")를 제공합니다.

const child_process = require('child_process');
function git(command) {
  return child_process.execSync(`git ${command}`, { encoding: 'utf8' }).trim();
}

new webpack.EnvironmentPlugin({
  GIT_VERSION: git('describe --always'),
  GIT_AUTHOR_DATE: git('log -1 --format=%aI'),
});

DotenvPlugin

써드 파티 DotenvPlugin (dotenv-webpack)을 사용해 dotenv 변수를 사용할 수 있습니다.

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

new Dotenv({
  path: './.env', // .env 파일 경로 (기본값)
  safe: true, // .env.example 로드 (기본값은 dotenv-safe를 사용하지 않는 "false")
});