动态引入模块：Webpack require.context 的灵活运用

require.context 是一个非常有用的 Webpack API，它允许我们在编译时动态地引入模块。这个功能在一些场景下非常有用，比如需要动态加载模块、实现国际化、主题切换等功能时会经常用到。

require.context API 说明

官方文档：依赖管理 | webpack 中文文档

首先，让我们了解一下 require.context 的使用方式。它的基本语法是：

其中：

• directory 是要搜索的目录
• useSubdirectories 表示是否搜索子目录
• regExp 是匹配文件的正则表达式

当 Webpack 编译时，require.context 会根据传入的参数在指定的目录中进行递归搜索，并返回一个函数。这个函数有三个属性：resolve、keys 和 id。

1. resolve 函数用于解析模块请求，它接受一个参数，即请求的模块路径，返回这个模块对应的 ID。这样可以方便地根据模块路径获取模块 ID，用于在构建时动态引入模块。
2. keys 属性是一个函数，返回一个数组，包含了指定目录下所有匹配的模块的相对路径。这个数组可以被遍历，用于动态加载模块。
3. id 属性是这个上下文模块的 ID。这个 ID 在 Webpack 构建过程中是唯一的，可以用于标识这个上下文模块。

对 require.context 功能进行简要说明：

• 在 Webpack 编译时，当遇到 require.context 声明时，Webpack 会根据传入的参数进行递归文件搜索，并生成一个模块列表。
• 然后，在运行时，当调用 require.context 返回的函数时，实际上是根据之前生成的模块列表进行动态模块引入。

举例说明

当使用 require.context 时，我们可以通过一个简单的示例来说明它的用法和作用。假设我们有一个项目结构如下：

现在我们想要动态地导入 components 目录下所有以 .js 结尾的文件，并在 index.js 中统一导出这些组件。我们可以利用 require.context 来实现这个功能。

首先，准备好 Button Input 组件

然后，在 index.js 文件中使用 require.context：

在上面的代码中，我们首先使用 require.context 引入 components 目录下所有以 .js 结尾的文件，然后遍历这些文件，将每个组件的默认导出存储在一个对象中，并以文件名（去掉路径和扩展名）作为键名。

接着，我们可以在其他文件中使用这个统一导出的组件集合：

通过这种方式，我们可以动态地导入 components 目录下的所有组件，而不需要手动列出每个组件的引入语句。这样可以极大地简化代码结构，提高代码的可维护性和扩展性。

Webpack 中 require.context 的实现

将上述例子打包编译后，观察 require.context 的实际代码

代码说明：

• 它创建了一个模拟的上下文模块，用于根据模块路径动态加载对应的模块。
• 在代码中，map 对象表示了模块路径和实际模块文件路径之间的映射关系。例如，"./Button.jsx" 对应着实际文件路径 "./src/components/basic/Button.jsx"。
• 接下来，定义了两个函数 webpackContext 和 webpackContextResolve。

• • webpackContext 函数用于根据传入的模块路径参数 req，调用 webpackContextResolve 函数解析对应的实际模块路径，并最终通过 __webpack_require__ 加载该模块。
  • webpackContextResolve 函数则用于根据传入的模块路径 req 在 map 对象中查找对应的实际模块文件路径。如果找不到对应的映射关系，则抛出一个错误。

• 此外，还定义了 webpackContext.keys 方法，用于返回所有模块路径的数组，即 map 对象中的所有键。
• 最后，使用 module.exports 导出了 webpackContext 函数作为模块的输出，以便在其他地方使用这个模拟的上下文模块。

实际应用

场景说明

代码说明

1. 根据条件动态创建 script 标签，加载 mobile.extend.min.js

1. 进入具体某一菜单，加载对应的扩展模块

总结

1. require.context 实际上是借助 Webpack 在编译阶段生成的模块列表，提供了一种在运行时动态引入模块的机制。
2. 这种机制为开发者在特定的场景下提供了更灵活、高效的模块引入方式，极大地增强了 Webpack 的功能和应用范围。
3. 在实际的开发中，我们可以利用 require.context 来实现动态加载模块，简化代码结构，提高开发效率。

原文链接：https://juejin.cn/post/7341617121955446794