webpack 中 require.context() 多个模块的加载

require.context (param1，param2，param3)

参数：param1:要检索的目录

　　　param2:是否检索子目录

　　　param3:匹配文件的正则表达式，一般是文件名

返回：返回一个require 函数，该函数有三个属性：resolve , keys , id ;

　　resolve : 是一个函数，返回的的被解析模块的id，接受一个参数request

　　keys: 也是一个函数，返回一个数组，该数组是由所有可能被上下文模块解析的请求对象组成

　　id:上下文模块的id

 

const path = require('path')
const files = require.context('@/components/login', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
    const name = path.basename(key, '.vue')// 提取出用 ‘/' 隔开的path的最后一部分,path.basename(p, [ext])。 p要处理的path,ext要过滤的字符
    modules[name] = files(key).default || files(key)
})
components:modules

 

files此时是一个函数

files.keys()属性方法执行后会返回一个数组：["./aaa.vue", "./bbb.vue", "./ccc.vue", "./ddd.vue"]

files.resolve('./aaa.vue')属性方法传入一个login文件下的相对路径('./aaa.vue')会返回匹配到的文件的绝对路径("./src/components/login/aaa.vue")