webpack中require.context的运用

1. 作用：

利用require创建context (上下文)，来告知在编译时具体需要导入哪些模块(即：批量处理待导入模块进行导入)；
webpack会在构建的时候解析代码中的require.context() (实际上是webpack的方法，vue一般基于webpack，所以可以使用)

1-1. 背景：

当我们代码的request中含有表达式(expressions)时，就会创建一个上下文(context)，因为在编译时(compile time)不清楚具体导入哪个模块;

例如：我们项目中可能会包含 .ejs 的文件目录：

example_directory
│
└───template
│   │   table.ejs
│   │   table-row.ejs
│   │
│   └───directory
│       │   another.ejs

那么 require() 调用会被评估解析：

require('./template/' + name + '.ejs');

webpack会解析 require() 调用，并提取出以下信息：

Directory: ./template
Regular expression: /^.*\.ejs$/

然后会生成一个 context module(上下文模块)。它包含目录下的所有模块 的引用如果一个request 符合正则表达式，就能require进来。该context module包含一个map(映射)对象，会把requests翻译成对应模块的id。
示例map(映射)对象：

{
  "./table.ejs": 42,
  "./table-row.ejs": 43,
  "./directory/another.ejs": 44
}

这意味着 webpack 能够支持动态地 require，但会导致所有可能用到的模块都包含在 bundle 中。

2. 使用：

require.context()可以传入三个参数：要搜索的目录，表示是否还搜索其子目录的标记，匹配文件的正则表达式：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例：

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

require.context('../', true, /\.stories\.js$/);
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。

3. 返回：

require.context创建出一个context，一个context module会导出一个(require)函数，此函数可以接收一个参数：request。 此导出函数有三个属性：resolve、keys、id

• resolve：是一个函数，它返回request被解析后得到的模块id。
• keys：也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求组成(即符合require.context()参数中正则表达式的所有文件的组成)。
• id：是 context module 的模块 id. 它可能在你使用 module.hot.accept 时会用到。

如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就很有用：

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

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

const cache = {};

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

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

4. 运用：

4-1. 动态将components文件下的组件自动化注册为全局组件：

// main.js文件：

import Vue from "vue";

// 自动加载components目录下的 .vue 结尾的文件 第二参数是是否查询其子目录
const requireComponent  = require.context("./components", true, /\.vue$/);

requireComponent.keys().forEach(fileName  => {
  const componentConfig = requireComponent(fileName);
 // 兼容 import export 和 require module.export 两种规范
  const ctrl = componentConfig.default || componentConfig;
  Vue.component(ctrl.name, ctrl);
});

4-2. 动态导入router文件下所有的分模块路由文件

// routes.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routerAry = []
// 自动加载modules目录下的 .js 结尾的文件
const requireRouter  = require.context("./modules", true, /\.js$/);

requireRouter.keys().forEach(fileName => {
    const routerConfig = requireRouter(fileName);
    routerAry.push(routerConfig);
})

const routes = [
    {
    path: '/login',
    component: load('login'),
    meta: {
      requireAuth: false,
      title: '登录'
    }
  },
  ...routerAry  
]