场景
当将一个业务拆分成多个组件时，我们在父组件导入子组件的一半做法是通过import 一个一个的导入，每当新增一个组件，都要修改父组件去import 这个组件。
问题
能否实现在父组件不用一个一个import子组件，而且新增一个子组件时，不需要修改父组件去import这个组件
解决方案。
在父组件路径上新建一个目录，用来存放子组件，通过webpack 的api require.context获取这个目录的组件，然后注入父组件的components即可。
require.context 需要三个参数，第一个是子组件所在的目录路径，第二个是Boolean，代表是否遍历子目录，第三个是表达式，用来过滤文件的。
const modulesFiles = require.context('./comp', true, /\.vue$/)
// modulesFiles 是一个函数，里面有三个属性，keys(),resove(),id,
//其中keys方法是返回匹配的子组件的文件路径
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// 获取组件文件名
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
// 获取组件对象
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
// 将处理过的子组件导入components 中
const components = [
...Object.values(modules)
]
