ContextReplacementPlugin

上下文 (Context) 指代一个带有表达式的 require，例如 require('./locale/' + name + '.json')。当遇到这类表达式时，webpack 会推断出目录 ('./locale/') 以及一个正则表达式 (/^.*\.json$/)。由于 name 在编译时是未知的，webpack 会将每个文件作为一个模块包含在 bundle 中。

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