Webpack 笔记 - 探究 require.context
在前端开发中，Webpack 是一个非常常用的打包工具。之前我们已经了解了 Webpack 的基础概念和常用配置。今天我们来学习 Webpack 中一个非常有用的特性 require.context。
require.context 是 Webpack 中用来导入多个模块的方法。它会遍历文件夹中符合特定规则的文件，把这些文件作为模块导入。这个方法的语法如下：
require.context(directory, useSubdirectories = false, regExp = /^\.\/.*$/, mode = 'sync');
其中，directory 表示要遍历的文件夹路径，useSubdirectories 表示是否遍历子目录，默认不遍历，regExp 表示符合规则的文件名，mode 表示导入模式，有同步和异步两种方式。默认使用同步方式。
下面举个例子：
假如我们有一个文件夹，里面存放了多个图标，在 JS 代码中导入这些图标。
新建 /src/icons 文件夹，存放多个图标文件。
导出所有图标：
// icons.js
export const icon1 = require("./icon1.svg");
export const icon2 = require("./icon2.svg");
export const icon3 = require("./icon3.svg");- 这种方式需要手动一个一个导出，显得很冗余。
相比之下，我们使用 require.context，只需要在 icons.js 中添加以下代码：
// icons.js
const context = require.context("./", false, /\.svg$/);
const keys = context.keys();
keys.forEach(key => {
const name = key.replace('./', '').replace('.svg', '');
exports[name] = context(key);
});这段代码通过 require.context 遍历当前目录下所有符合规则的 .svg 文件，可以直接将所有的图像导出。其中，context 就是一个对象，通过调用 context.keys() 方法，可以获取当前 context 中所有文件的文件路径。经过循环处理，我们可以得到一个每个图标文件对应一个 exports 的结果。
除了上述例子中遍历当前目录，require.context 也支持遍历子目录。只需要将 useSubdirectories 设置为 true 即可。
总结
require.context 可以直接遍历指定目录下的所有文件并导入，避免了在代码中手动一个个导入。用于多种场景，方便管理、维护导入资源。使用时，需要注意传入的路径以及正则表达式的规则。掌握 require.context 的使用，可以使开发变得更加高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6541ecec7d4982a6ebb8ca11