Vue中两个让你幸福感爆棚的组件导入小技巧之require.context

前言

小伙伴们大家好，在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）中我们已经学习了一个注册全局组件的小技巧，使得我们在注册大量全局组件时不再被Vue.use或Vue.component所霸屏。不知道小伙伴们看了以后幸福感有没有提升呢，如果觉得还不过瘾，那么接下来的这个连import都可以省略的小技巧会不会让你怦然心动呢？
我们今天要分享的是一个webpack为我们提供的能够获取特定上下文的api函数require.context。

require.context

• 作用： 上面已经提到require.context是webpack中的一个能够获取特定上下文的api，它主要用来实现自动化导入模块， 即不再需要手写import导入。
• 使用场景： 在前端工程中如果有这样一种场景：需要从一个文件夹及其子文件夹中引入较多的模块时，可以考虑使用这个api，它会自动遍历文件夹及其子文件夹中指定的文件，然后自动导入，不再需要每次显式的调用import导入了，听起来是不是有点心动了。
• 语法分析： require.context(directory, useSubdirectories = false, regExp = /^.//)。该函数接收3个参数
  • directory：string类型，