dynamic requires

A context is created if your request contains expressions, so the exact module is not known on compile time.

Example:

  1. require("./template/" + name + ".jade");

webpack parses the require statement and extracts some information:

  • Directory: ./template
  • Regular expression: /^.*\.jade$/

context module

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:

  1. {
  2.     "./table.jade": 22,
  3.     "./table-row.jade": 23,
  4.     "./directory/folder.jade": 24
  5. }

The context module also contains a bit runtime logic to access the map.

dynamic require rewriting

The original require statement gets rewritten by the compiler to access the context module: (assuming the context module gets the module id 21)

Example:

  1. // original statement
  2. require("./template/" + name + ".jade");
  4. // rewritten statement
  5. require(21)("./" + name + ".jade");

parser evaluation

Not every expression results in a context. The parser has a small evaluation engine to evaluate simple expressions. Here are some examples:

  1. require(expr ? "a" : "b"); // => require(expr ? 25 : 26)
  2. require("a" + "b"); // => require(27)
  3. require("not a".substr(4).replace("a", "b")); // => require(26)
  4. // ...

require.context

You can create your own context with the require.context function. It allow to pass a directory, regular expression and a flag if subdirectories should be used too.

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

Examples:

  1. require.context("./test", false, /Test$/)
  2. // a context with all files from the test directory that can be
  3. // required with a request endings with "Test"
  5. require.context("..", true, /^grunt-[^\/]+\/tasks/[^\/]+$/)
  6. // all grunt task that are in a modules directory of the parent folder

context module API

A context module exports a (require) function that takes one argument: the request.

The exported function has a property resolve which is a function and returns the module id of the parsed request.

The exported function has another property keys which is a function that returns all possible requests that the context module can handle.

And the exported function has another property id which is the module id of the context module. This may be useful for module.hot.accept.

Examples:

  1. var req = require.context("./templates", true, /^\.\/.*\.jade$/);
  3. var tableTemplate = req("./table.jade");
  4. // tableTemplate === require("./templates/table.jade");
  6. var tableTemplateId = req.resolve("./table.jade");
  7. // tableTemplateId === require.resolve("./templates/table.jade");
  9. req.keys();
  10. // is ["./table.jade", "./table-row.jade", "./directory/folder.jade"]
  12. req.id;
  13. // is i. e. 42

or

  1. function requireAll(requireContext) {
  2.   return requireContext.keys().map(requireContext);
  3. }
  4. // requires and returns all modules that match
  6. var modules = requireAll(require.context("./spec", true, /^\.\/.*\.js$/));
  7. // is an array containing all the matching modules

Note: keys depends on Object.keys. You may need to polyfill it for older browsers.

ContextReplacementPlugin

This plugin can overwrite the details for a context (i. e. the RegExp). See [[list of plugins]].

Critical dependencies

If the module source contains a require that cannot be statically analyzed, the context is the current directory.

In this case a Critical dependencies warning is emitted. You need to use the ContextReplacementPlugin in most cases.

Examples: someFn(require) require.bind(null)

Example

See an example here.