假如我们在项目中需要引入一个文件夹下的文件，并且这个文件夹下的文件数量会增多，如图：
对于.vue文件一般情况下我们直接 import XXX from 'XXX'，再注册为
components: {
XXX
},
就可以作为局部组件使用了;对于.js文件,每个文件export default XXX，再import {XXX} from 'xxx'就可以了，但是对于文件数量多的场景，这样用极不方便又不美观，这个时候我们可以结合webpack提供的api require.context。
require.context是什么呢？
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。 用法：require.context(directory,useSubdirectories,regExp),
directory:表示检索的目录useSubdirectories：表示是否检索子文件夹regExp:匹配文件的正则表达式,一般是文件名 例如：const files = require.context('../../form-component', true, /.vue$/),拿到files对象后，将其进行处理成自己需要的数据
const modules = {}
files.keys().forEach(key => {
modules[key.replace(/(./|/index.vue)/g, '')] = files(key).default
})
this.modules = modules
