ContextReplacementPlugin

Context 指的是 require with an expression，例如 require('./locale/' + name + '.json')。在遇到此類表達式時，webpack 會推論目錄 ('./locale/') 和正規表示式 (/^.*\.json$/)。由於編譯時並不知道 name，因此 webpack 會將每個檔案都包含在套件中作為模組。

ContextReplacementPlugin 允許您覆寫推論的資訊。有各種方式可以設定外掛

用法

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/ 的檔案。因此，僅包含這些語言環境 (有關更多資訊，請參閱 此問題)。

內容回呼

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', // resolved relatively
  });
});

其他選項

newContentResource 和 newContentCreateContextMap 參數也可用

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

這兩個參數可以一起使用，以更具針對性的方式重新導向請求。newContentCreateContextMap 允許您將執行時期請求對應到編譯請求，形式為物件

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