require.context()

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烦恼了.当然在项目还是有挺多地方可以使用到的;

1. 状态管理vuex
2. 路由注册
3. svg的优雅使用,有了require.context,相当每个项目都自带了一个iconfont的库了,只需要不断的往里面添加icon就可以了