ContextReplacementPlugin

Context 是指帶有諸如 ?require('./locale/' + name + '.json')? 之類的表達式的要求。當遇到這樣的表達式時，webpack 會推斷目錄 ?('./locale/')? 和正則表達式 ?(/^.*\.json$/)?。由于在編譯時不知道名稱，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? context 僅限于匹配 ?/de|fr|hu/? 的文件。因此，僅包括那些語言環(huán)境。

Content Callback

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

?newContentCallback? 函數(shù)被賦予了 ?ContextModuleFactory? 的數(shù)據(jù)對象，并有望覆蓋所提供對象的 ?request? 屬性。

使用此回調(diào)，我們可以將請求動態(tài)重定向到新位置：

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

  Object.assign(context, {
    regExp: /^\.\/\w+/,
    request: '../../locale', // resolved relatively
  });
});

Other Options

?newContentResource? 和 ?newContentCreateContextMap? 參數(shù)也可用：

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource: string,
  newContentCreateContextMap: object // mapping runtime-request (userRequest) to compile-time-request (request)
);

這兩個參數(shù)可以一起使用，以更有針對性的方式重定向請求。 ?newContentCreateContextMap? 允許您以對象的形式將運行時請求映射到編譯請求：

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

Further Reading

• Issue 2783 - ContextReplacementPlugin Description
• Using context replacement module for date-fns