1、require.context是什么
一个webpack的api,require.context主要用来实现前端自动化导入模块,它会遍历文件夹中指定文件,然后自动导入,不需要每次使用的时候使用import导入模块
2、使用场景
从一个文件夹中引入多个模块
3、参数
require.context(directory,useSubdirectories,regExp)接受三个参数
参数 | 类型 | 说明 |
directory | 字符串 | 读取文件的路径 |
useSubdirectories | 布尔值 | 是否遍历子文件夹 |
regExp | 正则表达式 | 匹配文件的正则表达式,一般是文件名 |
例:
// 读取svg文件夹下所有的以.svg结尾的文件(不读取子目录)
const req = require.context('./svg', false, /\.svg$/)
4、返回值
值得注意的是require.context()执行后返回值是一个函数,并且这个函数有3个属性
属性 | 类型 | 说明 |
---|---|---|
resolve | 函数 | 接受一个参数request,request为文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径 |
keys | 函数 | 返回一个数组,由匹配成功的文件所组成的数组 |
id | 字符串 | 执行环境的 id |