- Notifications
You must be signed in to change notification settings - Fork125
context
A context is created if yourrequire() contains an expression rather than a string literal, so the exact module is not known on compile time.
Example:
require("./template/"+name+".jade");
webpack parses therequire statement and extracts some information:
- Directory:
./template - Regular expression:
/^.*\.jade$/
A context module is generated. It contains references to all modules in that directory that can be required with a request matching the regular expression. The context module contains a map which translates requests to module ids.
Example:
{"./table.jade":22,"./table-row.jade":23,"./directory/folder.jade":24}
The context module also contains some runtime logic to access the map.
The originalrequire statement gets rewritten by the compiler to access the context module: (assuming the context module gets the module id21)
Example:
// original statementrequire("./template/"+name+".jade");// rewritten statementrequire(21)("./"+name+".jade");
Not every expression results in a context. The parser has a small evaluation engine to evaluate simple expressions. Here are some examples:
require(expr ?"a" :"b");// => require(expr ? 25 : 26)require("a"+"b");// => require(27)require("not a".substr(4).replace("a","b"));// => require(26)// ...
You can create your own context with therequire.context function. It allows you to pass three parameters:
- the directory to match within,
- a boolean flag to include or exclude subdirectories,
- a regular expression to match files against.
require.context(directory,useSubdirectories=false,regExp=/^\.\//)
Examples:
require.context("./test",false,/Test$/)// a context with all files from the test directory that can be// required with a request endings with "Test"require.context("..",true,/^grunt-[^\/]+\/tasks/[^\/]+$/)// all grunt task that are in a modules directory of the parent folder
A context module exports a (require) function that takes one argument: the request.
The exported function has a propertyresolve which is a function and returns the module id of the parsed request.
The exported function has another propertykeys which is a function that returns all possible requests that the context module can handle.
And the exported function has another propertyid which is the module id of the context module. This may be useful formodule.hot.accept.
Examples:
varreq=require.context("./templates",true,/^\.\/.*\.jade$/);vartableTemplate=req("./table.jade");// tableTemplate === require("./templates/table.jade");vartableTemplateId=req.resolve("./table.jade");// tableTemplateId === require.resolve("./templates/table.jade");req.keys();// is ["./table.jade", "./table-row.jade", "./directory/folder.jade"]req.id;// is i. e. 42
or
functionrequireAll(requireContext){returnrequireContext.keys().map(requireContext);}// requires and returns all modules that matchvarmodules=requireAll(require.context("./spec",true,/^\.\/.*\.js$/));// is an array containing all the matching modules
Note:keys depends onObject.keys. You may need to polyfill it for older browsers.
This plugin can overwrite the details for a context (i. e. the RegExp). Seelist of plugins.
If the module source contains arequire that cannot be statically analyzed, the context is the current directory.
In this case aCritical dependencies warning is emitted. You need to use theContextReplacementPlugin in most cases.
Examples:someFn(require)require.bind(null)
Seean example here.
webpack 👍