依赖管理 Dependency Management
es6 modules commonjs amd
表达式来调用 require with expression
当你的请求包含表达式,那个一个上下文环境将被创建。这个需要的模块被编译的时候是未知的。
例子:
require("./template/" + name + ".ejs");
webpack 解析require语句,并且摘出一些信息:
Directory: ./template Regular expression: /^.*\.ejs$/
上下文模块 context modules
一个上下文模块(context module)被生成之后,它包含目录模块的所有引用,并且能够被一个相匹配的正则表达式调用。
上下文模块包含一个map,能够把请求翻译成模块的id。
例子:
{ "./table.ejs": 42,"./table-row.ejs": 43,"./directory/folder.ejs": 44 }
上下文模块(context module)也包含一些运行时逻辑(runtime logic)--可以访问到map。
这意味着支持一步调用,但是这也会导致所有相关的模块将被包含在bundle(被编译后的文件)中。
require.context
你可以创建自己的上下文,通过使用require.context方法(函数)。
它允许传递一个路径,正则表达式和一个标记——如果子目录允许被搜索匹配的话。
webpack 在这个上下文模块被创建的时候解析require.context()
函数。
语法如下:
require.context(directory,useSubdirectories = false,regExp = /^\.\//)
例子:
require.context("./ ",false,/\.test\.js$/); // test文件中所有的以`test.js`结尾的文件将能够被调用,这就是该语句创建的上下文环境。
require.context("../",true,/\.stories\.js$/); // 一个包含所有父文件夹和子及后代文件夹中以`.stories.js结尾的文件的上下文。
context module API
一个上下文模块(context module)导出一个(require)函数,它包含一个参数——一个请求。
这个函数有三个属性:resolve,keys,id.
function importAll (r) { r.keys().forEach(r); } importAll(require.context('../components/',/\.js$/));
var cache = {}; function importAll (r) { r.keys().forEach(key => cache[key] = r(key)); } importAll(require.context('../components/',/\.js$/)); // At build-time cache will be polulated with all required modules.
id
是指上下文模块的id,这个也许在module.hot.accept
中很有用。