ContextReplacementPlugin 插件

webpackjsorg-main插件参考

ContextReplacementPlugin 插件

Context（上下文）指的是 import() 或 require() 中的动态表达式，例如 require('./locale/' + name + '.json')。当遇到此类表达式时，webpack 会推断出目录（'./locale/'）和一个正则表达式（/^.*\.json$/）。由于在编译时无法知道 name 的值，webpack 会将每个文件都作为模块包含到 bundle 中。

ContextReplacementPlugin 允许你覆盖推断出的信息。配置此插件有多种方式：

用法

ts 复制代码

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

如果资源（目录）与 resourceRegExp 匹配，插件会分别使用 newContentResource、newContentRecursive 或 newContentRegExp 替换默认的资源、递归标志或生成的正则表达式。如果 newContentResource 是相对路径，则相对于之前的资源进行解析。

下面是一个限制模块使用的小示例：

js 复制代码

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

moment/locale context 被限制为匹配 /de|fr|hu/ 的文件。因此只会包含这些 locale（更多信息请参阅此 issue）。

内容回调

ts 复制代码

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

newContentCallback 函数会收到 ContextModuleFactory 的 data 对象，并应覆盖所提供的对象的 request 属性。

使用此回调，我们可以动态地将请求重定向到新的位置：

js 复制代码

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

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

其他选项

newContentResource 和 newContentCreateContextMap 参数也可用：

ts 复制代码

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

这两个参数可以一起使用，以更有针对性地重定向请求。newContentCreateContextMap 允许你以对象形式将运行时请求（runtime request）映射到编译时请求（compile request）：

js 复制代码

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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。