require.context ('./ svg', falso, /\.svg$/)

require.context

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

vue-element-admin ¿Qué significa ver el código de arriba?

Primero require.contextestá la API proporcionada por Webpack, consulte la documentación , lo que significa que los tres parámetros aceptados son:

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

¡Su valor de retorno reqes una función, que tiene una propiedad importante y una función importante!

Propiedad : req.keys, el valor de la propiedad es un método y el retorno es una matriz de rutas después de la llamada, por ejemplo["./dashboard.svg", "./example.svg"]

Función : acepte una ruta, analice la ruta e introdúzcala. Puede encontrar lo siguiente imprimiendo:

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)

Si el código anterior todavía se ve un poco confuso, traducirlo al siguiente texto debería entenderlo, ¡equivalente!

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