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有用。这里并不深入说明。