当在vue中想要批量引入组件进行注册时，可以使用webpack提供的require.context()方法
语法 & 默认值
require.context(
directory,
(useSubdirectories = true),
(regExp = /^\.\/.*$/),
(mode = 'sync')
);
参数说明：
- directory {String} -文件夹目录路径
- useSubdirectories {Boolean} -是否包含子目录
- regExp {RegExp} -匹配文件名的正则表达式
- mode {String} = 'sync' 同步 | 'async' 异步
注意：参数必须为字面量（具体的值），不能是变量，在路径中使用变量可能会报错或者获取不到文件
返回值 & 属性
require.context()运行后返回的是一个函数（{Function}，实际上有点像一个类），有3个属性，即假如
const modules = require.context("./", false, /s\\.vue$/)
那么modules对象就可以点出来有以下3个属性：
- resolve {Function} -传入文件路径参数，返回文件的id（实际上小编打印出来是一个根目录路径）
- keys {Function} -获取模块对象的所有文件的相对路径数组
- id {String} -模块对象的id
3个属性的例子截图
在同目录下，在index.vue中引入其他组件：
打印出来3个的结果截图：
有了这个3个属性/方法，就可以做点事情啦；看例子
参考例子：
其实就是上面截图的例子，在同一个目录下，有bars.vue、index.vue、menus.vue三个文件，想在index.vue文件中导入其他两个文件：
<script>
const modules = require.context("./", false, /s\.vue$/)
console.log(modules.resolve("./bars.vue"))
console.log(modules.keys())
console.log(modules.id)
const compos = {}
modules.keys().forEach((path)=>{
//拼成引用的键值对
//1.获取组件实体，跟import()是一个意思
const compo = modules(path)
//2、组件注册名，从文件路径截取文件名，这个可以看自己实际情况写方法
const compoName = path.split("/")[1].replace(/\.vue$/,"")// ./bars.vue ==> bars
//3、放进compos，{bars: import("./bars.vue")}
compos[compoName] = compo.default || compo
})
export default {
components:{
...compos
}
}
</script>
看了应该会用了吧，下面我把这个方法的源码贴出来，可能你会更加明白：
