require.context

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

vue-element-admin 中看到上面代码，什么意思呢？

首先 require.context 是 Webpack 提供的 API，详见文档，接受的 3 个参数的含义分别为：

// 引入资源的目录、是否需要遍历子目录、匹配文件的规则
const req = require.context('./svg', false, /\.svg$/)

它的返回值 req 也是一个函数，此函数有一个重要的属性和一个重要的功能！

属性：req.keys，属性值是一个方法，调用后返回的是一个路径数组，例如 ["./dashboard.svg", "./example.svg"]

功能：接受一个路径，解析路径并引入！通过打印可以发现如下：

webpackContext(req) {
	// 解析传递过来的路径，例如 './dashboard.svg'
	var id = webpackContextResolve(req);
	// 引入
	return __webpack_require__(id);
}

requireAll

// map(requireContext) 意思是每次遍历调用 requireContext 这个函数，并把数组中的第一项传递给 requireContext 函数中
const requireAll = requireContext => requireContext.keys().map(requireContext)
// requireAll(req) 得到的是一个解析完毕后的数组，不过这里这个数组并没有被使用到！
requireAll(req)

如果上面代码看上去还是有点迷糊，翻译成下面的写法应该懂了吧，等价！

req.keys().forEach(key => req(key))