简介
1、一个webpack的api,主要用来实现自动化导入模块
在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api;
它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
2、接受三个参数
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
例子 require.context('./test', false, /.test.js$/);
3、require.context函数执行后返回的是一个函数,并且这个函数有3个属性
- 1)resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
- 2)keys {Function} -返回匹配成功模块的名字组成的数组
- 3){String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?
4、 扩充知识
在正则表达式中要匹配一个反斜杠时,需要四个反斜杠。
语法
const path = require('path')
const files = require.context('@/components/context', false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
const name = path.basename(key, ".vue");
modules[name] = files(key).default || files(key);
});
components: modules,