ContextReplacementPlugin

上下文是指带有表达式的 require，例如 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 上下文被限制为匹配 /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',
});