Context refers to a require with an expression such as require('./locale/' + name + '.json'). When encountering such an expression, webpack infers the directory ('./locale/') and a regular expression (/^.*\.json$/). Since the name is not known at compile time, webpack includes every file as module in the bundle.

The ContextReplacementPlugin allows you to override the inferred information. There are various ways to configure the plugin:

newContentResource, newContentRecursive, newContentRegExp

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource?: string,
  newContentRecursive?: boolean,
  newContentRegExp?: RegExp

If the resource (directory) matches resourceRegExp, the plugin replaces the default resource, recursive flag or generated regular expression with newContentResource, newContentRecursive or newContextRegExp respectively. If newContentResource is relative, it is resolved relative to the previous resource.


new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)

The moment/locale context is restricted to files matching /de|fr|hu/. Thus only those locales are included (see also this GitHub issue).


new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentCallback: (data) => void

The function newContentCallback is given a data object of the ContextModuleFactory and it is expected to overwrite the request attribute of the supplied object.


new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
  if (!/\/moment\//.test(context.context)) { return; }
  Object.assign(context, {
    regExp: /^\.\/\w+/,
    request: '../../locale', // resolved relatively

newContentResource, newContentCreateContextMap

new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource: string,
  newContentCreateContextMap: object // mapping runtime-request (userRequest) to compile-time-request (request)


new ContextReplacementPlugin(/selector/, './folder', {
  './request': './request',
  './other-request': './new-request'
  /* runtime-request: compile-time request */

Further Reading

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.