ContextReplacementPlugin

Context는 require('./locale/' + name + '.json')와 같은 표현식을 통한 요청을 나타냅니다. 이러한 표현식을 만나면, webpack은 디렉터리 ('./locale/')와 정규 표현식 (/^.*\.json$/)을 추론합니다. 컴파일 시 name을 알 수 없기 때문에 webpack은 모든 파일을 번들에 모듈로 포함합니다.

ContextReplacementPlugin을 사용하면 추론된 정보를 오버라이드 할 수 있습니다. 플러그인을 구성하는 방법에는 여러 가지가 있습니다.

Usage

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource?: string,
  newContentRecursive?: boolean,
  newContentRegExp?: RegExp
)

리소스(디렉터리)가 resourceRegExp와 일치하면, 플러그인은 기본 리소스, 재귀 플래그 또는 생성된 정규식을 각각 newContentResource, newContentRecursive 또는 newContextRegExp로 바꿉니다. newContentResource가 상대적인 경우 이전 리소스를 기준으로 해결됩니다.

다음은 모듈 사용을 제한하는 작은 예제입니다.

new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /de|fr|hu/);

moment/locale 컨텍스트는 /de|fr|hu/와 일치하는 파일로 제한됩니다. 따라서 해당 locale만 포함됩니다(자세한 내용은 이 이슈를 참고하세요).

Content Callback

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentCallback: (data) => void
);

newContentCallback 함수에는 ContextModuleFactory의 data 객체가 제공되며 제공된 객체의 request 속성을 덮어쓸 것으로 예상됩니다.

이 콜백을 사용하여 요청을 새 위치로 동적 리다이렉션할 수 있습니다.

new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
  if (!/\/moment\//.test(context.context)) return;

  Object.assign(context, {
    regExp: /^\.\/\w+/,
    request: '../../locale', // 상대적으로 해결
  });
});

Other Options

newContentResource 및 newContentCreateContextMap 파라미터도 사용할 수 있습니다.

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource: string,
  newContentCreateContextMap: object // 런타임-요청(userRequest)을 컴파일-시간-요청(request)으로 매핑
);

이 두 파라미터를 함께 사용하여 보다 대상화된 방식으로 요청을 리다이렉션할 수 있습니다. newContentCreateContextMap을 사용하면 런타임 요청을 매핑하여 객체 형태로 요청을 컴파일 할 수 있습니다.

new ContextReplacementPlugin(/selector/, './folder', {
  './request': './request',
  './other-request': './new-request',
});