webpack 之 require.context

一.什么是require.context？

官方文档上是这样描述的：

简单来说，就是通过执行 require.context 函数获取一个特定的上下文, 返回一个 require 函数。

格式：require.context(directory,includeSubdirs,filter)

directory：要查找遍历的路径

includeSubdirs：是否遍历子路径

filter：匹配文件的正则规则

 

二.什么时候要用？

项目里我们根据不同的功能划分成不同的模块，我们可以在公共的文件里一个一个导入，但是随着项目变大，结构越来越复杂，对手动import就会变得力不从心效率较低，所以我们可以通过webpack的require.context方法来实现前端工程的自动化，在项目中如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块，实现自动导入。

 

三.require.context结构及原理分析

这里就通过本人的项目结构做出分析:

这里是从modular文件下遍历所有文件找出.js结尾的所有文件。

可以看到，require.context返回的是一个函数，这个函数有resolve，keys，id三个属性。

resolve [function] :接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

keys [function] :返回匹配成功模块的名字组成的数组

id [string] :执行环境的id,返回的是一个字符串

 

resolve方法返回了一个字符串代表着传入参数的文件相对于整个工程的相对路径

resolve函数返回的是一个模块,这个模块才是真正我们需要的.

从而通过上面的操作最终就能获取到modular下面所有router文件夹下文件的内容，从而实现路由的自动导入