Webpack依赖管理

es6模块
commonJS
amd

带有表达式的加载

如果你的请求包含表达式，那么会创建一个上下文，并且编译时无法知道确切的模块。
例：

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

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

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

上下文模块

上下文模块被生成。 它包含对该目录中所有模块的引用，这些引用可以是与正则表达式匹配的请求所必需的。 上下文模块包含将请求转换为模块ID的映射。
例：

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

上下文模块还包含一些运行时逻辑来访问映射。这意味着支持动态加载，但会导致所有可能的模块被包含在该包中。

require.context

你可以使用require.context()函数创建自己的上下文。它允许你传入一个目录来搜索，一个标志表示是否应该搜索子目录，还有一个正则表达式来匹配文件。webpack在构建时解析代码中require.context()。
语法如下：

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

例:

require.context("./test", false, /\.test\.js$/);
// 加载了test目录下（不包含子目录）所有以test.js结尾的上下文

require.context("../", true, /\.stories\.js$/);
// 加载了上一级目录下（包含子目录）所有以stories.js结尾的上下文

上下文模块API

上下文模块导出一个带参数（request）的（require）函数。该函数有3个属性：resolve，keys，id。

• resolve是一个函数，并返回解析请求的模块ID。
• 键是一个返回上下文模块可以处理的所有可能请求的数组的函数。

如果你想要求一个目录中的所有文件或匹配一个模式，这可能很有用。例如：

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

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

var cache = {};

function importAll (r) {
  r.keys().forEach(key => cache[key] = r(key));
}

importAll(require.context('../components/', true, /\.js$/));
// 所有加载的模块在构建时会填充cache

• id是上下文模块的模块ID。 这可能对module.hot.accept有用。这里并不深入说明。