require.context

require.context

一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）

webpack 文档原文

参数解释：

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

// 遍历获取 api 目录下所有的 js 文件（包括子目录）
require.context('@/api' , true, /(.js$)/);

返回结果
| 属性 | 类型 | 说明
| resolve | Function | 接受一个参数request，request为文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
| keys | Function | 返回一个数组，由匹配成功的文件所组成的数组
| id | String | 执行环境的 id

使用示例

1. svg导入

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

这里传了一个最初的 requireContext 到 map() 函数里，也就是 require.context 的返回值，这个返回值是一个函数，只要传入函数名就会被 webpack 自动进行导入。

 

 通俗的说就可以换成类似如下的解释：

function(requireContext) {
    requireContext.keys() // 得到了所有导入的模块名数组
    .map(function(moduleName){
       autorequire(moduleName) // webpack 自动导入 
    })
}

再看一下官网的例子1

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

就能够理解是自动导入所有的js文件

官网的例子2

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require.context('../components/', true, /\.js$/));
// 在构建时(build-time)，所有被 require 的模块都会被填充到 cache 对象中。

cache 会被填充成以 js 文件名为 key ，以实际模块为 value 的对象。那将 cache 给 export 后，就可以在其他文件中对其导入并掌控。

参考文章： requireContext.keys().map(requireContext)在批量导入时的作用

2. filters全局注册

export default {
    install (Vue) {
      const filters = require.context('@/utils/filters', true, /\.filter\.js/)
      filters.keys().forEach(key => {
        const f = filters(key)
        Object.keys(f).forEach(functionName => {  // Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历(enumerable)属性的键名。
          Vue.filter(functionName, f[functionName])
        })
      })
    }
  }