使用require.context()实现前端自动化导入

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