# 关于模块化的自动导入
在前面一篇文章我们使用了require.context来加载一个目录下所有的svg文件，现在我们来认识一下require.context
# require.context
require.context是webpack提供的一个的方法，注意这是webpack提供的，用于用于查找指定文件夹下的指定类型文件。
let modules = require.context(directory, useSubdirectories, regExp);
1
其接收3个参数
| 参数 | 描述 | 类型 |
|---|---|---|
| directory | 要查找的目录的路径 | string |
| useSubdirectories | 是否查找子目录 | boolean |
| regExp | 要匹配文件的正则表达式 |
require.context() 返回一个函数webpackContext，该函数相当于require，不过其参数只能是require.context查找到的模块
// 查找当前目录下的 modules 目录中的全部 js 文件
const webpackContext = require.context('./modules', true, /\.js/)；
// 查找到的第一个模块路径
let modulePath = webpackContext.keys()[0];
webpackContext(modulePath); // 模块将加载成功
webpackContext('./test.js'); // 模块路径非 require.context 查找结果，加载失败
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
webpackContext有两个静态方法keys与resolves，和一个属性id
| 属性方法 | 描述 | 类型 |
|---|---|---|
| keys | 返回成功获取到的模块组成的数组 | function |
| resolve | 接收参数为匹配成功的模块路径，即keys中存储的值；其返回匹配文件相对于整个项目的相对路径 | function |
| id | 上下文模块的模块ID | string |