依赖管理

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$/

上下文模块

生成一个上下文模块。它包含对该目录中所有模块的引用，这些模块可以使用与正则表达式匹配的请求进行引用。上下文模块包含一个映射，它将请求转换为模块 ID。

示例映射

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

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

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

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 是一个函数，它返回上下文模块可以处理的所有可能请求的数组。

如果您想要要求目录中所有文件或匹配某个模式的文件，这将很有用，例如

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 有用。