1.使用场景：
在当前的前端开发过程中,大部分都是单页面模块化开发,那么当模块达到一定规模的时候,手动添加导出引用显得有点麻烦,那么我们可以使用webpack的require.context来实现我们的动态引入,只需要按照规定的格式书写代码即可
2.用法：
require.context()
可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式。
const reqiureContext = require.context('../router', true, /\.js$/);
返回一个webpack上下文环境，本质是一个函数，并且有id，keys，resolve.
context.id
context.keys() 可以返回文件的键组成的数组
resolve {Function} 接受一个参数request,request为test文件夹下面匹配文件的相对路径, 返回这个匹配文件相对于整个工程的相对路径
3.使用：
自动导入路由规则
const routeList = [];
const reqiureContext = require.context('../router', true, /\.js$/);
reqiureContext.keys().forEach((key) => {
// console.log('--reqiureContext key--', key);
const name = key.slice(2, -3); // 得到 route的名称
// console.log(name);
// ————————————————reqiureContext(key)返回文件中的内容 ——————————————————
const routeConfig = reqiureContext(key) || {};
console.log(reqiureContext.resolve(key));
const { route = [] } = routeConfig;
route.forEach((item) => routeList.push({ ...item, path: `/${name}/${item.path}` }));
});
4.总结：
通过以上的参数以及举例使用,对于我们的模块化开发是有一定的帮助的.再也不用因为
模块太多,而手动去import烦恼了.当然在项目还是有挺多地方可以使用到的;
- 状态管理vuex
- 路由注册
- svg的优雅使用,有了require.context,相当每个项目都自带了一个iconfont的库了,只需要不断的往里面添加icon就可以了