require.context的作用

1、什么是 require.context

一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。
在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入

2、使用

//遍历svg目录下的所有svg文件
const req = require.context('./svg', false, /\.svg$/)

3、返回结果

4、自动加载目录下特定 js 文件，并将模块数据添加进原型链属性中

// api/index.js
const path = require('path');
const moduleList = {};
const dirname = "@/api"
reqContext(dirname);
function reqContext(dir) {
  // 匹配特定 js 文件
  const fileList = require.context(dir , true, /(api).js$/);
  let files = fileList.keys();
  if(!files.length) return ;
  files.forEach( paths => {
    let content = require(`${dir}/${path.join(paths)}`);
    assignment(content);
  });
}
// 将模块的数据加载进 moduleList 对象中
function assignment(obj) {
  if(!Object.keys(obj).length) return ;
  let arr = Object.keys(obj);
  arr.forEach( key => {
    moduleList[key] = obj[key];
  })
}
module.exports = moduleList;

// index.js
import moduleList from '@/api';
import vue from 'vue';

vue.prototype.$moduleList = moduleList;