Vue 项目中 require.context() API 的用法

314 阅读1分钟

1.语法 require.context(directory,useSubdirectories,regExp,mode='sync')

  1. directory:表示检索的目录
  2. useSubdirectories:是否检索子文件夹
  3. regExp:匹配文件的正则表达式
  4. mode:加载模式,同步/异步

2.实际运用

第一步:搜集./svg文件下的所有以.svg结尾的文件,返回一个对象

const req = require.context('./svg', false, /\.svg$/)

第二步:创建一个函数

const requireAll = requireContext => requireContext.keys().map(requireContext)

返回的是一个函数,有 keys 这么一个方法可以返回函数包含所有模块名的数组。 那么关键来了,这里传了一个最初的 requireContext 到 map() 函数里,也就是 require.context 的返回值,这个返回值是一个函数,只要传入函数名就会被 webpack 自动进行导入。

requireAll(req) 结束