1、require.context是什么
一个webpack中用来管理依赖的一个函数,获取一个特定上下文,主要用来自动导入模块。
2、require.context参数
require.context(directory,useSubdirectories,regExp)函数接受三个参数
(1) directory {String}—读取文件路径
(2) useSubdirectories {Boolean} —是否遍历文件的子目录
(3) regExp {RegExp} —匹配文件的正则
例如:
require.context(’./global’,true,/main.vue/);
上面的代码遍历当前目录下的global文件夹的所有.main.vue结尾的文件,遍历子目录
路径如下所示

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性
resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
keys {Function} -返回匹配成功模块的名字组成的数组
id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept
这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)
3、案例使用:
(1)注册全局组件
a、index.js文件
import Vue from 'vue'
// 前端工程自动化 导出全局组件
const requireComponent=require.context('./global',true,/main\.vue/)
console.log(requireComponent.resolve ,77);
// 返回匹配成功模块的名字组成的数组
console.log(requireComponent.keys ,75);
// 执行环境的id,返回的是一个字符串
console.log(requireComponent.id ,76);
requireComponent.keys().forEach(filename=>{
// 匹配成功当前模块的路径
console.log(filename,8);
const component=requireComponent(filename)
console.log(component,9);
const ctor=component.default||component
console.log(ctor,2);
//注册全局组件
Vue.component(ctor.name,ctor)
})
打印filename如下:

打印component如下

b、各个公共组件
注:每个公共main.vue中都要有一个唯一的名字

c、在main.js中引入全局注册组件的index.js文件

公共组件是,每个组件不用引入组件,直接根据组件名字使用就行

2、全局引入svg图片
要引入svg下面所有的svg文件: 在该文件(icons)目录下新建一个js文件index.js 写如下代码:
let requireAll = requireContext => requireContext.keys().map(requireContext)
let req = require.context('./svg', false, /\.svg$/)
requireAll(req)
然后在main中引入这个文件
网友评论