依赖管理

ES6 模块

CommonJS

AMD

带表达式的 require

如果你的请求包含表达式，就会创建一个上下文，因此在编译时无法确定确切的模块。

例如，假设我们有以下包含 .ejs 文件的文件夹结构

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

当以下 require() 调用被评估时

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

Webpack 解析 require() 调用并提取一些信息

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

上下文模块

会生成一个上下文模块。它包含对该目录中所有可通过匹配正则表达式的请求进行 require 的模块的引用。该上下文模块包含一个将请求翻译为模块 ID 的映射。

示例映射

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

上下文模块还包含一些用于访问该映射的运行时逻辑。

这意味着支持动态 require，但会导致所有匹配的模块都包含在 bundle 中。

require.context

你可以使用 require.context() 函数创建自己的上下文。

它允许你传入一个要搜索的目录、一个指示是否也搜索子目录的标志，以及一个用于匹配文件的正则表达式。

Webpack 在构建时会解析代码中的 require.context()。

语法如下所示

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`.

require.context('../', true, /\.stories\.js$/);
// a context with all files in the parent folder and descending folders ending with `.stories.js`.

上下文模块 API

一个上下文模块导出一个（require）函数，该函数接受一个参数：请求。

导出的函数有 3 个属性：resolve、keys、id。

• resolve 是一个函数，返回解析请求的模块 ID。
• keys 是一个函数，它返回一个数组，其中包含上下文模块可以处理的所有可能请求。

如果你想 require 某个目录中所有文件或匹配某个模式的文件，这会很有用，例如：

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$/));
// At build-time cache will be populated with all required modules.

• id 是上下文模块的模块 ID。这可能对 module.hot.accept 有用。