DefinePlugin

DefinePlugin을 사용하면 컴파일 타임에 구성할 수 있는 ì „ì—­ 상수를 만들 수 있습니다. 이는 개발 빌드와 프로덕션 빌드 간에 서로 다른 동작을 하고 싶을 ë•Œ 유용합니다. 개발 빌드에서 로깅을 수행하지만, 프로덕션 빌드에서는 수행하지 않는 경우 ì „ì—­ 상수를 사용하여 로깅을 수행할지 여부를 ê²°ì •í•  수 있습니다. 이것이 DefinePluginê°€ 유용한 이유입니다. 이 플러그인을 설정하고 개발 및 프로덕션 빌드 환경을 잊어버리세요.

new webpack.DefinePlugin({
  // Definitions...
});

Usage

DefinePlugin에 전달된 각 키는 .ë¡œ ê²°í•© 된 개별 또는 다중 식별자입니다.

• 값이 문자열이면 이는 코드 조각으로 사용됩니다.
• 값이 문자열이 ì•„ë‹Œ 경우 문자열화 됩니다(함수를 포함해서).
• 값이 객체라면 모든 키가 동일한 방식으로 정의됩니다.
• 키에 typeof 접두사를 붙이면 typeof 호출에 대해서만 정의됩니다.

값은 코드에 인라인 되어 중복 조건을 제거하기 위한 최소화 단계를 거치게 됩니다.

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

console.log('Running App version ' + VERSION);
if (!BROWSER_SUPPORTS_HTML5) require('html5shiv');

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

최소화 단계 없이 webpack을 통과하면 다음과 같은 결과가 나타납니다.

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

그 후 최소화 단계를 거친 결과는 다음과 같습니다.

console.log('Production log');

Feature Flags

기능 플래그를 사용하여 프로덕션/개발 빌드 기능을 활성화/비활성화 할 수 있습니다.

new webpack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false),
});

Service URLs

프로덕션/개발 빌드에서 서로 다른 서비스 URL을 사용할 수 있습니다.

new webpack.DefinePlugin({
  SERVICE_URL: JSON.stringify('https://dev.example.com'),
});

Runtime values via runtimeValue

function (getterFunction, [string] | true | object) => getterFunction()

파일에 의존하는 값으로 변수를 정의할 수 있으며 이러한 파일이 파일 시스템에서 변경 될 때 재평가 됩니다. 이는 감시된 파일이 변경될 때 webpack이 재빌드 됨을 의미합니다.

webpack.DefinePlugin.runtimeValue 함수에는 두 가지 인자가 있습니다.

• 첫 번째 인자는 정의에 할당할 값을 반환 해야 하는 function(module, key, version)입니다.

• 두 번째 인자는 감시할 파일 경로의 배열이거나 모듈을 캐시 í•  수 없음으로 표시하는 true 플래그일 수 있습니다. 5.26.0 버전부터는 아래의 속성을 가진 객체 인자를 사용할 수 있습니다.

  • fileDependencies?: string[] 함수가 의존하는 파일 목록입니다.
  • contextDependencies?: string[] 함수가 의존하는 디렉터리 목록입니다.
  • missingDependencies?: string[] 함수가 의존하는 존재하지 않는 파일 목록입니다.
  • buildDependencies?: string[] 함수가 의존하는 빌드 의존성 목록입니다.
  • version?: string | () => string 함수의 버전입니다.

const fileDep = path.resolve(__dirname, 'sample.txt');

new webpack.DefinePlugin({
  BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now, {
    fileDependencies: [fileDep],
  }),
});

BUILT_AT의 값은 'sample.txt'ê°€ 파일 시스템에서 마지막으로 업데이트된 시간입니다. (예: 1597953013291)