webpack - 什么是 `require.context` ？

Question

Webpack Docs

You can create your own context with the require.context() function.

伟大的。什么是“上下文”？这实际上是做什么的？

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

允许我“搜索”吗？搜索我假设的文件，然后呢？这个函数最终会做什么？这有什么用途？

Answer 1

webpack 编译器的主要功能之一是递归解析所有模块，从条目开始，通过分析 require() 构建所有模块依赖关系的图。 , require.context() , import和 import()表达式。
webpack 和 Node.js 中“上下文”的通常解释是一些目录，用作解析模块路径的基础。例如，当前工作目录用作 default context让 webpack 解析到 index.js 的实际路径入口模块；请求的上下文 require.resolve('../../../foo.js')是 __dirname .
require.context 是 webpack 编译器支持的一项特殊功能，它允许您从某个基本目录开始获取所有匹配的模块。目的是在编译时告诉 webpack 将该表达式转换为它可以解析的所有可能匹配模块请求的动态列表，然后将它们添加为构建依赖项并允许您在运行时要求它们。
简而言之，您将使用 require.context在运行时在 Node.js 中完全相同的情况下，您将使用 glob 动态构建需要的模块路径列表。返回值是一个行为类似于 require 的可调用对象，其键包含必要的模块请求数据，这些数据可以作为参数传递给它以要求模块。
有几种方法可以使用它，但我认为两个最常见的用例是自动需要一些众所周知的模块(例如，您只需添加 some.test.js 测试模块和在某些模块中使用 require.context 到动态发现所有测试，因此不必记录并记住每次添加新测试模块时手动执行)或在存储库中加载静态 Assets 以将文件发送到构建输出(来自其他构建工具的新 webpack 用户通常会惊讶于他们的图像、字体、音频文件和其他 Assets 不会出现在输出中，除非某些模块需要它们)。