A quick summary of all methods and variables available in code compiled with webpack.

require(dependency:String)

Returns the exports from a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available.

Style: CommonJs

Example:

var$=require("jquery");varmyModule=require("my-module");

define([name:String],[dependencies:String[]],factoryMethod:function(...))

The name argument is ignored. If thedependencies array is provided, the factoryMethod will be called with the exports of each dependency (in the same order). Ifdependencies is not provided the factoryMethod is called withrequire,exports andmodule (for compatibility!). If the factoryMethod returns a value, this value is exported by the module. The call is sync. No request to the server is fired. The compiler ensures that each dependency is available.

Style: AMD

Example:

define(["jquery","my-module"],function($,myModule){// Do something with $ and myModule.// Export a functionreturnfunctiondoSomething(){// Do something};});

Note: Can NOT be used in an async function.

This value is returned, when that module is required. It's default value is a new object.

Style: CommonJs

Example:

module.exports=functiondoSomething(){// Do something};

Note: Can NOT be used in an async function.

The exported object. It's the default value ofmodule.exports. Ifmodule.exports gets overwritten,exports will no longer be exported.

Style: CommonJs

exports.someValue=42;exports.anObject={x:123};exports.aFunction=functiondoSomething(){// Do something};

Note: Using it in an async function may not have the expected effect.

define(value:!Function)

Just exports the providedvalue. Thevalue cannot be a function.

Style: AMD (for compatibility!)

Example:

define({answer:42});

Note: Can NOT be used in an async function.

export:value

Export the defined value. The label can occur before a function declaration or a variable declaration. The function name or variable name is the identifier under which the value is exported.

Style: Labeled modulesdependencies.LabeledModulesPlugin

Example:

export:varanswer=42;export:functionmethod(value){// Do something};

Note: Using it in an async function may not have the expected effect.

require:"dependency"

Make all exports from the dependency available in the current scope. Therequire label can occur before a string. The dependency must export values with theexport label. CommonJs or AMD modules cannot be consumed.

Style: Labeled modulesdependencies.LabeledModulesPlugin

Example:

// in dependencyexport:varanswer=42;export:functionmethod(value){// Do something};

require:"dependency";method(answer);

require.resolve(dependency:String)

Returns the module id of a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available.

The module id is a number in webpack (in contrast to node.js where it is a string, the filename).

Style: CommonJs

Example:

varid=require.resolve("dependency");typeofid==="number";id===0// if dependency is the entry pointid>0// elsewise

The module id of the current module.

Style: CommonJs

Example:

// in file.jsmodule.id===require.resolve("./file.js")

Multiple requires to the same module result in only one module execution and only one export. Therefore a cache in the runtime exists. Removing values from this cache cause new module execution and a new export. This is only needed in rare cases (for compatibility!).

Style: CommonJs

vard1=require("dependency");require("dependency")===d1deleterequire.cache[require.resolve("dependency")];require("dependency")!==d1

// in file.jsrequire.cache[module.id]===modulerequire("./file.js")===module.exportsdeleterequire.cache[module.id];require.cache[module.id]===undefinedrequire("./file.js")!==module.exports// in theory; in praxis this causes a stack overflowrequire.cache[module.id]!==module

require.context(directory:String,includeSubdirs:Boolean/* optional, default true */,filter:RegExp/* optional */)

Example:

varcontext=require.context('components',true,/\.html$/);varcomponentA=context.resolve('componentA');

Style: webpack

require.ensure(dependencies:String[],callback:function([require]),[chunkName:String])

Download additional dependencies on demand. Thedependencies array lists modules that should be available. When they are,callback is called. If the callback is a function expression, dependencies in that source part are extracted and also loaded on demand. A single request is fired to the server, except if all modules are already available.

This creates a chunk. The chunk can be named. If a chunk with this name already exists, the dependencies are merged into that chunk and that chunk is used.

Style: CommonJs

Example:

// in file.jsvara=require("a");require.ensure(["b"],function(require){varc=require("c");});require.ensure(["d"],function(){vare=require("e");},"my chunk");require.ensure([],function(){varf=require("f");},"my chunk");/* This results in:* entry chunk- file.js- a* anonymous chunk- b- c* "my chunk"- d- e- f*/

require(dependencies:String[],[callback:function(...)])

Behaves similar torequire.ensure, but the callback is called with the exports of each dependency in thedependencies array. There is no option to provide a chunk name.

Style: AMD

Example:

// in file.jsvara=require("a");require(["b"],function(b){varc=require("c");});/* This results in:* entry chunk- file.js- a* anonymous chunk- b- c*/

require.include(dependency:String)

Ensures that the dependency is available, but don't execute it. This can be use for optimizing the position of a module in the chunks.

Style: webpack

Example:

// in file.jsrequire.include("a");require.ensure(["a","b"],function(require){// Do something});require.ensure(["a","c"],function(require){// Do something});/* This results in:   * entry chunk - file.js - a   * anonymous chunk - b   * anonymous chunk - cWithout require.include "a" would be in both anonymous chunks.The runtime behavior isn't changed.*/

This isfalse if the module is currently executing, andtrue if the sync execution has finished.

Style: node.js (for compatibility!)

SeeHot Module Replacement.

Style: webpack

Seenode.js global

Style: node.js

Seenode.js process

Style: node.js

Depending on the config optionnode.__dirname:

• false: Not defined
• mock: equal "/"
• true:node.js __dirname

If used inside a expression that is parsed by the Parser, the config option is treated astrue.

Style: node.js (for compatibility!)

Depending on the config optionnode.__filename:

• false: Not defined
• mock: equal "/index.js"
• true:node.js __filename

If used inside a expression that is parsed by the Parser, the config option is treated astrue.

Style: node.js (for compatibility!)

The resource query of the current module.

Style: webpack

Example:

// Inside "file.js?test":__resourceQuery==="?test"

Equals the config optionsoutput.publicPath.

Style: webpack

The raw require function. This expression isn't parsed by the Parser for dependencies.

Style: webpack

The internal chunk loading function. Takes two arguments:

• chunkId The id for the chunk to load.
• callback(require) A callback function called once the chunk is loaded.

Style: webpack

Access to the internal object of all modules.

Style: webpack

Likerequire.resolve, but doesn't include the module into the bundle. It's a weak dependency.

Style: webpack

Example:

if(__webpack_modules__[require.resolveWeak("module")]){// do something when module is available}if(require.cache[require.resolveWeak("module")]){// do something when module was loaded before}

Access to the hash of the compilation.

Only available with theHotModuleReplacementPlugin or theExtendedAPIPlugin

Style: webpack

Generates arequire function that is not parsed by webpack. Can be used to do cool stuff with a global require function if available.

Style: webpack

Equals the config optiondebug

Style: webpack