webpack中赋值require.context的变量为何可接收参数调用？

疑问1：require.context的返回值为什么可以接收参数调用？ #

require.context的返回值本身就是一个可执行函数，并非普通的上下文对象。webpack在编译阶段会扫描你传入的目录，把所有符合筛选规则的模块路径都提前生成索引，绑定到返回的这个函数内部。
你给这个返回函数传入的参数，就是keys()方法返回的模块相对路径，函数内部会根据提前生成的索引，加载对应路径的模块，返回模块的导出内容。
不同mode参数下返回值的行为有区别：

• 当mode为默认的sync时，函数直接同步返回模块导出内容
• 当mode为lazy时，函数返回一个Promise，异步加载完成后resolve对应模块内容，就是你给出的第一个示例里的用法

疑问2：为什么要遍历req.keys()调用req(key)？ #

调用require.context仅生成了包含匹配模块索引的函数，不会主动加载任何匹配到的模块。
遍历req.keys()并逐个调用req(key)的过程，才是真正执行模块引入的操作：这一步会把所有匹配的模块引入到当前执行上下文，触发模块内的代码执行，拿到模块的导出内容供后续逻辑使用。
这个操作完全不等价于重复调用require.context，require.context只会在你第一次调用时执行一次编译阶段的路径扫描，后续调用返回函数只是从已经生成好的索引里取模块，没有额外的扫描开销。 #

内容的提问来源于stack exchange，提问作者SweetSpicy Fry