Webpack 模块方法——require.context

在 Webpack 中，除了可以使用 import 、export 等模块语法之外，还可以使用 Webpack 提供的模块方法。其中使用最多的是 require.context 。

在项目中经常会遇到一个问题，组件库导入、路由注册等需要手写大量 import ，比较麻烦。这种情况下就可以使用 require.context 。

require.context(
  (directory: String), // 检索目录
  (includeSubdirs: Boolean), // 是否检索子文件夹，默认 true
  (filter: RegExp), // 匹配文件的正则表达式，默认值是 /^\.\/.*$/，所有文件
  (mode: String), // 可选的， 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once'，默认值是 'sync'
)

我们可以通过正则匹配需要导入的模块：

const context = require.context("./views/components", true, /\.vue$/);
// context 本身是一个函数，传入模块 ID 加载模块
// 上面还有一个静态方法 keys ，可以获取所有匹配到的模块 ID 的数组
context.keys();
// 通过遍历数组加载模块
context.keys().forEach(filename => {
  context(filename);
})

常常用来在组件内引入多个组件：

const context = require("@/components", false, /\.vue$/);

const modules = context.keys().reduce((accu, file) => {
  accu[file] = context(file).default;
  return accu;
}, {});

export default {
  components: modules
}

在 main.js 中实现组件全局注册：

import Vue from "vue";

const requireComponents = require.context("./views/components", true, /\.vue/);

requireComponents.keys().forEach(fileName => {
  // 获取组件实例
  const component = requireComponents(fileName);
  // 获取组件名
  const componentName = component.name;
  // 组件注册
  Vue.component(componentName, component.default);
})

参考：

https://webpack.docschina.org/api/module-methods/#requirecontext