require.context(directory,useSubdirectories,regExp)
参考链接
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录 (此例中 : 当为true时 subsetone可用)
regExp: 匹配文件的正则表达式,一般是文件名
require.context返回一个函数对象（也就是说，context module是一个函数对象）:
函数可以接收一个参数：request。 (
作为一个函数，也接受一个req参数，这个和resolve方法的req参数是一样的，即匹配的文件名的相对路径。而该函数返回的是一个模块，这个模块才是真正我们需要的。这个Module模块和使用import导入的模块是一样的。
)
该函数对象有三个属性：resolve, keys, id。
resolve 是一个函数，它返回 request 被解析后得到的模块 id。
keys 也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求
id 是 context module 里面所包含的模块 id.
应用场景：
回忆一下 当我们引入组件时
第一步 创建一个子组件
第二步 import ... form ...
第三步 components:{..}
第四步 页面使用 <...></...>
高端写法：
我们在components文件夹创建一个叫global.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
const requireComponent = require.context(
'.', false, /\.vue$/
//找到components文件夹下以.vue命名的文件
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = capitalizeFirstLetter(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
//因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
)
Vue.component(componentName, componentConfig.default || componentConfig)
})
最后我们在main.js中import 'components/global.js'，然后我们就可以随时随地使用这些基础组件，无需手动引入了。
