前言

上两篇文章中出现了多次require.context这个api，详情请看 前端开发中的一些实用小技巧，如何优雅的管理Vue中的路由，里面都出现了require.context()，今天我们来聊聊关于webpack中require.context() 的那点事。

require.context是什么

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块，简单来说就是一个‘偷懒’的api。

什么时候需要用到require.context

如果有以下情况,可以考虑使用require.context替换。

在index.vue这个组件中如何要引用components下的所以组件，就可以用到require.context来代替繁琐的import引入。

分析require.context

require.context，可以通过正则匹配引入相应的文件模块，语法如下：

require.context(directory, useSubdirectories, regExp)

require.context有三个参数：

• directory：需要检索的目录
• useSubdirectories：是否检索子目录
• regExp：匹配文件的正则表达式

知道了这个我们就可以实现上面的自动导入组件的功能，代码如下：

// index.vue
template<>

我们来看看require.context返回的是啥

可以看到require.context函数执行后返回的是一个函数,并且这个函数有3个属性

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

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

• id {String} -执行环境的id,返回的是一个字符串

resolve方法返回了一个字符串代表着传入参数的文件相对于整个工程的相对路径，上述代码中requireComponent(fileName)，说明requireComponent作为一个函数,也接受一个req参数,这个和resolve方法的req参数是一样的，即匹配的文件名的相对路径,，而requireComponent函数返回的是一个模块，这个模块才是真正我们需要的，打印一下看下效果：

可以看到这个跟我们用import导入的是一样的结果，如此便实现了自动导入/注册组件的功能。

总结

熟练使用require.context可以减少很多重复的代码，简直是‘懒人’必备！require.context使用场景还有很多，比如上篇文章中的路由去中心化，还有比较常用的场景是svg图标,可以不用每次导入图标文件，可以说很方便了。

感谢各位的观看，如果觉得对你有点小帮助，可以给笔者一个小赞哈，点点关注哦，每天学习一个小知识哈。