简单了解-require.context
1.概念
是什么：是一个webpack的api，通过执行require.context函数获取一个特定的上下文，主要用来实现自动化导入模块。
作用：将某个文件夹的内容全部导入进来。
应用场景：
- 用于全局组件的导入
- 引入vuex的module
- svg图片的引入
- 其他需要同一文件夹多个导入的场景
2.参数及返回值介绍
require.context( directory, useSubdirectories, regExp, mode='sync' )
参数介绍：
- directory:表示检索的目录
- useSubdirectories：表示是否检索子文件夹
- regExp:匹配文件的正则表达式,一般是文件名
- mode:加载模式，同步/异步
例如 require.context(“@/views/components”,false,/.vue$/)
返回值介绍：
- resolve() :它返回请求被解析后得到的模块 id
- keys(): 返回当前所有搜索到的文件的数组
- id: 上下文模块里面所包含的模块 id
3.用法
3.1在组件内引入多个组件
const path = require("path")
const files = require.context("@/views/00-99/requireContext/components", false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
const name = path.basename(key, ".vue")
modules[name] = files(key).default || files(key)
})
console.log(modules)
export default {
components: modules,
}
3.2引入项目中所有的svg
const requireContext = require.context('./svg', false, /\.svg/)
const requireAll = context => context.keys().map(context)
requireAll(requireContext)