require.context

require.context，一个webpack的api，能通过执行它来获取特定的上下文，主要用于前端自动化导入模块，

应用场景

当一个文件需要导入比较多的文件的时候即可使用该方法来进行导入，如下面的情况

如果把项目分成一个个模块，那么一个个地把js文件引入就会比较繁琐，如


把上图的模块文件统统导入进下图的index.js文件内，我想如果是手动一个一个来的话，估计光导入就得写个几百行代码了，项目越来越大的时候估计得烦死。。。所以webpack的这个require.context自动化导入就很必要了。

context.require分析

context.require函数接收三个参数：

1. directory {String} -读取文件的路径
2. useSubdirectories {Boolean} -是否遍历文件的子目录
3. regExp {RegExp} -匹配文件的正则

用法：

require.context(‘./test’, false, /.test.js$/);
上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录

大概用图片来表示的话就是这样子的

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性

resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

keys {Function} -返回匹配成功模块的名字组成的数组

id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

require.context做了什么

我们在里层的api文件夹新建一个index.js，用来收集所有的模块然后一次性导出给外层的index.js

里层index的代码

外层的index.js代码

上面里层的index导出来的是一个对象，对象内的component属性就是index.vue组件。
外层index.js文件又把拿到的对象导出给更外层的index.js文件，让它对这些收集到的信息整理成一个模块数组导出，如

更外层的index.js代码

上面每个模块都有一个index.js用于收集本模块的api、组件、路由、store文件信息并导出，而这个更外层的index.js要做的就是把模块内的index.js文件导出来的文件信息放到modules数组内，每个模块的信息都作为一个数组对象元素，再导出这个数组给最外层的index.js

最外层的index.js导入模块数组

然后这个最外层的index.js就拿到了所有的模块的api、路由、组件、store文件信息了，然后就能统一给这个vue项目的所有模块进行初始化了，例如把拿到的组件注册成全局组件、注入路由以及注入状态信息store等等

通过上面的步骤我们就能知道，如果不使用自动化导入的话，那么多的模块、那么多的文件，我们光导入就能要老命了。。。除非我们不分模块把所有信息都写在一个文件上。。。但是后面维护起来也要命。。。而使用require.context，我们就能比较省事了，后面需要添加文件也不需要我们再操心导入了，require.context会自动帮我们导入。