1.问题描述
不知道小伙伴们有没有在注册全局组件的时候不断的import,十分想写个循环将公共组件注册，require.context()函数就是能满足这个愿望
2.require.context()是什么
是一个webpack的API,当我们想从一个文件夹下引入多个文件的时候，就可以使用它，它会自动的遍历指定文件夹下的指定文件
3.如何使用require.context()
require.context()函数接收三个参数
const files = require.context(‘@/components‘, true, /index\.vue$/)
第一个参数：指定遍历的文件夹路径
第二个参数：是否遍历文件的子目录
第三个参数：匹配文件的正则表达式
4.require.context()的返回值
require.context()函数执行后返回的是一个函数，此函数具有三个属性
- resolve
接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径 - keys
返回匹配成功文件的相对路径组成的数组 - id
执行环境的id,返回的是一个字符串
示例：
-
文件目录
-
遍历components文件夹子目录下的index.vue文件，并将组件挂载到Vue上
-
控制台输出
-
main.js文件夹下引入