Vue项目中利用webpack的require.context实现批量引入/导入图片

1. 背景

前端项目中难免会有需要几十种icon或者png等类型的图片的情况，如果一个个import未免太过繁琐。而webpack的 require.context可以解决这种困扰。

2. 结构

静态资源位置和结构：


如图，我的目标是将mapDot中的十几个png图片批量导入，并且准确快捷的获取到。

3. index.js实现

const req = require.context('./mapDot', true, /\.png$/);
const pngHashMap = new Map();
req.keys().forEach((eachPng) => {
  const imgConfig = req(eachPng);
  const imgName = eachPng.replace(/^\.\/(.*)\.\w+$/, '$1');
  pngHashMap.set(imgName, { imgName, icon: req(eachPng).default || imgConfig });
});
export default pngHashMap;

这里用Map结构存取了一下，方便导入后使用。

4. 导入并使用

import pngHashMap from '../../assets/images';
console.log(pngHashMap)

如图，最后获取到了base64格式的图片