webpack项目，使用require.context动态加载本地图片

1.关于require.context

文章开头先介绍一下require.context的使用，它是一个webpack的api，可以通过这个方法获取一个特定的上下文，用来实现文件的批量自动化导入，在前端的项目中，如果遇到需要从一个文件夹下面引入很多模块的情况，就可以使用这个api遍历获取，从而摒弃掉使用多个import单个引入的方式。
#require.context的使用参数介绍
该函数接受三个参数：

1. directory {String} -读取文件的路径
2. useSubdirectories {Boolean} -是否遍历文件的子目录
3. regExp {RegExp} -匹配文件的正则

#require.context函数执行后返回的是一个函数
这个函数有3个属性：

1. resolve {Function} -接受一个参数request,request为文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
2. keys {Function} -返回匹配成功模块的名字组成的数组
3. id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载

这三个都是作为函数的属性执行的。

• resolve方法实际上是一个接受req作为参数的函数，这个req参数的值实际上是keys方法返回的名称数组中的元素。
• keys方法会返回符合文件名称规则的文件名数组。
• id属性返回了匹配的文件夹的相对于工程的相对路径,是否遍历子目录,匹配正则组成的字符串。

require.context函数执行后返回的这个函数，也可以直接接受一个req参数 被调用，这个参数和调用resolve方法所需的参数是一样的，即匹配的文件名的相对路径。函数返回的是一个模块，这个Module模块和使用import导入的模块是一样的，即这个才是我们真正意义上要引入使用的模块：

console.log(requireContext(requireContext.keys()[0]))      

// 打印结果直接上图吧👇👇：

另外三个方法对应的例子如下：

const requireContext = require.context("../../assets/images/home/",true, /^\.\/.*\.png$/);
console.log(requireContext.keys()) // 打印结果：["./Avatar_icon.png", "./Avatar_icon0.png", "./Avatar_icon1.png", "./Avatar_icon2.png", "./Avatar_icon3.png", "./GOTCUSTOMER_RANKING.png", "./NEWORDER_BULLETIN.png", "./PERFORMANCE_RANKING.png", "./achieveFirst.png", "./achieveSecond.png", "./achieveThird.png", "./banner_family@3x.png", "./banner_microShop@3x.png", "./banner_product@3x.png", "./banner_productVs@3x.png"]
console.log(requireContext.keys()[0]) // 打印结果：./Avatar_icon.png
console.log(requireContext.resolve(requireContext.keys()[0])) // 打印结果：./src/assets/images/home/Avatar_icon.png
console.log(requireContext.id) // 打印结果：./src/assets/images/home sync recursive ^\.\/.*\.png$

使用该方法例如：

// 这个就是获取assets/images下所有文件（包括遍历子目录的文件）中后缀名为.png的文件名集合
require.context("../../assets/images/",true, /^\.\/.*\.png$/).keys()
// 这个就是获取assets/images下所有文件（包括遍历子目录的文件）中，以./client/visitorDetail为前缀名，以.svg为后缀名的文件名集合
require.context("../../assets/images/",true,/^\.\/client\/visitorDetail\S*\.svg$/).keys()

2.项目中动态引入图片

介绍完require.context，下面我们回归正题
看完上面方法的介绍，对于动态引入图片其实不难实现了

 <img src={requireContext(`./${tabValue}.png`).default} alt="" />
 // 或者直接使用
 <img src={require('@/assets/images/home/'+ tabValue + '.png').default} alt=""/>

3.require.context()方法的优雅使用场景扩展

熟练使用require.context()可以很方便的帮我们实现很多功能，比如对于项目中有大量使用iconfont，svg的场景，我们就可以利用起来这个方法，详情可以转战这篇博客：
手摸手，带你优雅的使用 icon