webpack 中 require.context() 的用法

一、什么是 require.context

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.
– webpack 官方说明

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

二、如何使用

• 语法

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

// 示例
require.context('./test', false, /\.test\.js$/);
// a context with files from the test directory that can be required with a request ending with `.test.js`.

• 参数说明

• 返回值

导出的函数有 3 个属性: resolve, keys, id.如下表所示

• 用法示例

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

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