Output

The top-level output key contains set of options instructing webpack on how and where it should output your bundles, assets and anything else you bundle or load with webpack.

output.auxiliaryComment

string object

When used in tandem with output.library and output.libraryTarget, this option allows users to insert comments within the export wrapper. To insert the same comment for each libraryTarget type, set auxiliaryComment to a string:

webpack.config.js

module.exports = {
  //...
  output: {
    library: 'someLibName',
    libraryTarget: 'umd',
    filename: 'someLibName.js',
    auxiliaryComment: 'Test Comment'
  }
};

which will yield the following:

someLibName.js

(function webpackUniversalModuleDefinition(root, factory) {
  // Test Comment
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require('lodash'));
  // Test Comment
  else if(typeof define === 'function' && define.amd)
    define(['lodash'], factory);
  // Test Comment
  else if(typeof exports === 'object')
    exports['someLibName'] = factory(require('lodash'));
  // Test Comment
  else
    root['someLibName'] = factory(root['_']);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
  // ...
});

For fine-grained control over each libraryTarget comment, pass an object:

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    auxiliaryComment: {
      root: 'Root Comment',
      commonjs: 'CommonJS Comment',
      commonjs2: 'CommonJS2 Comment',
      amd: 'AMD Comment'
    }
  }
};

output.charset

boolean = true

Tells webpack to add charset="utf-8" to the HTML <script> tag.

Although charset attribute for <script> tag was deprecated, webpack still adds it by default for compatibility with non-modern browsers.

output.chunkFilename

string = '[id].js' function (pathData, assetInfo) => string

This option determines the name of non-initial chunk files. See output.filename option for details on the possible values.

Note that these filenames need to be generated at runtime to send the requests for chunks. Because of this, placeholders like [name] and [chunkhash] need to add a mapping from chunk id to placeholder value to the output bundle with the webpack runtime. This increases the size and may invalidate the bundle when placeholder value for any chunk changes.

By default [id].js is used or a value inferred from output.filename ([name] is replaced with [id] or [id]. is prepended).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFilename: '[id].js'
  }
};

Usage as a function:

webpack.config.js

module.exports = {
  //...
  output: {
    chunkFilename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
    },
  }
};

output.chunkLoadTimeout

number = 120000

Number of milliseconds before chunk request expires. This option is supported since webpack 2.6.0.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadTimeout: 30000
  }
};

output.chunkLoadingGlobal

string = 'webpackChunkwebpack'

The global variable used by webpack for loading of chunks.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoadingGlobal: 'myCustomFunc'
  }
};

output.chunkLoading

false string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>

The method to load chunks (methods included by default are 'jsonp' (web), 'importScripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js), but others might be added by plugins).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkLoading: 'async-node'
  }
};

output.chunkFormat

false string: 'array-push' | 'commonjs' | <any string>

The format of chunks (formats included by default are 'array-push' (web/WebWorker), 'commonjs' (node.js), but others might be added by plugins).

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    chunkFormat: 'commonjs'
  }
};

output.enabledChunkLoadingTypes

[string: 'jsonp' | 'import-scripts' | 'require' | 'async-node' | <any string>]

List of chunk loading types enabled for use by entry points. Will be automatically filled by webpack. Only needed when using a function as entry option and returning chunkLoading option from there.

webpack.config.js

module.exports = {
  //...
  output: {
    //...
    enabledChunkLoadingTypes: ['jsonp', 'require']
  }
};

output.crossOriginLoading

boolean = false string: 'anonymous' | 'use-credentials'

Tells webpack to enable cross-origin loading of chunks. Only takes effect when target is set to 'web', which uses JSONP for loading on-demand chunks, by adding script tags.

• 'anonymous' - Enable cross-origin loading without credentials
• 'use-credentials' - Enable cross-origin loading with credentials

output.devtoolFallbackModuleFilenameTemplate

string function (info)

A fallback used when the template string or function above yields duplicates.

See output.devtoolModuleFilenameTemplate.

output.devtoolModuleFilenameTemplate

string = 'webpack://[namespace]/[resource-path]?[loaders]' function (info) => string

This option is only used when devtool uses an options which requires module names.

Customize the names used in each source map's sources array. This can be done by passing a template string or function. For example, when using devtool: 'eval'.

webpack.config.js

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]?[loaders]'
  }
};

The following substitutions are available in template strings (via webpack's internal ModuleFilenameHelpers):

Template	Description
Template Description [absolute-resource-path] The absolute filename	The absolute filename
Template Description [all-loaders] Automatic and explicit loaders and params up to the name of the first loader	Automatic and explicit loaders and params up to the name of the first loader
Template Description [hash] The hash of the module identifier	The hash of the module identifier
Template Description [id] The module identifier	The module identifier
Template Description [loaders] Explicit loaders and params up to the name of the first loader	Explicit loaders and params up to the name of the first loader
Template Description [resource] The path used to resolve the file and any query params used on the first loader	The path used to resolve the file and any query params used on the first loader
Template Description [resource-path] The path used to resolve the file without any query params	The path used to resolve the file without any query params
Template Description [namespace] The modules namespace. This is usually the library name when building as a library, empty otherwise	The modules namespace. This is usually the library name when building as a library, empty otherwise

When using a function, the same options are available camel-cased via the info parameter:

module.exports = {
  //...
  output: {
    devtoolModuleFilenameTemplate: info => {
      return `webpack:///${info.resourcePath}?${info.loaders}`;
    }
  }
};

If multiple modules would result in the same name, output.devtoolFallbackModuleFilenameTemplate is used instead for these modules.

output.devtoolNamespace

string

This option determines the modules namespace used with the output.devtoolModuleFilenameTemplate. When not specified, it will default to the value of: output.library. It's used to prevent source file path collisions in sourcemaps when loading multiple libraries built with webpack.

For example, if you have 2 libraries, with namespaces library1 and library2, which both have a file ./src/index.js (with potentially different contents), they will expose these files as webpack://library1/./src/index.js and webpack://library2/./src/index.js.

output.filename

string function (pathData, assetInfo) => string

This option determines the name of each output bundle. The bundle is written to the directory specified by the output.path option.

For a single entry point, this can be a static name.

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'bundle.js'
  }
};

However, when creating multiple bundles via more than one entry point, code splitting, or various plugins, you should use one of the following substitutions to give each bundle a unique name...

Using entry name:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].bundle.js'
  }
};

Using internal chunk id:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[id].bundle.js'
  }
};

Using hashes generated from the generated content:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[contenthash].bundle.js'
  }
};

Combining multiple substitutions:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: '[name].[contenthash].bundle.js'
  }
};

Using function to return the filename:

webpack.config.js

module.exports = {
  //...
  output: {
    filename: (pathData) => {
      return pathData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
    },
  }
};

Make sure to read the Caching guide for details. There are more steps involved than just setting this option.

Note this option is called filename but you are still allowed to use something like 'js/[name]/bundle.js' to create a folder structure.

Note this option does not affect output files for on-demand-loaded chunks. It only affects output files that are initially loaded. For on-demand-loaded chunk files the output.chunkFilename option is used. Files created by loaders also aren't affected. In this case you would have to try the specific loader's available options.

Template strings

The following substitutions are available in template strings (via webpack's internal TemplatedPathPlugin):

Substitutions available on Compilation-level:

Template	Description
Template Description [fullhash] The full hash of compilation	The full hash of compilation
Template Description [hash] Same, but deprecated	Same, but deprecated

Substitutions available on Chunk-level:

Template	Description
Template Description [id] The ID of the chunk	The ID of the chunk
Template Description [name] The name of the chunk, if set, otherwise the ID of the chunk	The name of the chunk, if set, otherwise the ID of the chunk
Template Description [chunkhash] The hash of the chunk, including all elements of the chunk	The hash of the chunk, including all elements of the chunk
Template Description [contenthash] The hash of the chunk, including only elements of this content type (affected by optimization.realContentHash)	The hash of the chunk, including only elements of this content type (affected by optimization.realContentHash)

Substitutions available on Module-level:

Template	Description
Template Description [id] The ID of the module	The ID of the module
Template Description [moduleid] Same, but deprecated	Same, but deprecated
Template Description [hash] The hash of the module	The hash of the module
Template Description [modulehash] Same, but deprecated	Same, but deprecated
Template Description [contenthash] The hash of the content of the module	The hash of the content of the module

Substitutions available on File-level:

Template	Description
Template Description [file] Filename and path, without query or fragment	Filename and path, without query or fragment
Template Description [query] Query with leading ?	Query with leading ?
Template Description [fragment] Fragment with leading #	Fragment with leading #
Template Description [base] Only filename (including extensions), without path	Only filename (including extensions), without path
Template Description [filebase] Same, but deprecated	Same, but deprecated
Template Description [path] Only path, without filename	Only path, without filename
Template Description [name] Only filename without extension or path	Only filename without extension or path
Template Description [ext] Extension with leading .	Extension with leading .

Substitutions available on URL-level:

Template	Description
Template Description [url] URL	URL

[file] equals [path][base]. [base] equals [name][ext]. The full path is [path][name][ext][query][fragment] or [path][base][query][fragment] or [file][query][fragment].

The length of hashes ([hash], [contenthash] or [chunkhash]) can be specified using [hash:16] (defaults to 20). Alternatively, specify output.hashDigestLength to configure the length globally.

It is possible to filter out placeholder replacement when you want to use one of the placeholders in the actual file name. For example, to output a file [name].js, you have to escape the [name] placeholder by adding backslashes between the brackets. So that [\name\] generates [name] instead of getting replaced with the name of the asset.

Example: [\id\] generates [id] instead of getting replaced with the id.

If using a function for this option, the function will be passed an object containing data for the substitutions in the table above. Substituions will be applied to the returned string too. The passed object will have this type: (properties available depending on context)

type PathData = {
  hash: string,
  hashWithLength: (number) => string,
  chunk: Chunk | ChunkPathData,
  module: Module | ModulePathData,
  contentHashType: string,
  contentHash: string,
  contentHashWithLength: (number) => string,
  filename: string,
  url: string,
  runtime: string | SortableSet<string>,
  chunkGraph: ChunkGraph
}
type ChunkPathData = {
  id: string | number,
  name: string,
  hash: string,
  hashWithLength: (number) => string,
  contentHash: Record<string, string>,
  contentHashWithLength: Record<string, (number) => string>
}
type ModulePathData = {
  id: string | number,
  hash: string,
  hashWithLength: (number) => string
}

In some context properties will use JavaScript code expressions instead of raw values. In these cases the WithLength variant is available and should be used instead of slicing the original value.

output.assetModuleFilename

string = '[hash][ext][query]'

The same as output.filename but for Asset Modules

output.globalObject

string = 'window'

When targeting a library, especially when libraryTarget is 'umd', this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this'. Defaults to self for Web-like targets.

For example:

webpack.config.js

module.exports = {
  // ...
  output: {
    library: 'myLib',
    libraryTarget: 'umd',
    filename: 'myLib.js',
    globalObject: 'this'
  }
};

output.uniqueName

string

A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults to output.library name or the package name from package.json in the context, if both aren't found, it is set to an ''.

output.uniqueName will be used to generate unique globals for:

• output.chunkLoadingGlobal

webpack.config.js

module.exports = {
  // ...
  output: {
    uniqueName: 'my-package-xyz'
  }
};

output.hashDigest

string = 'hex'

The encoding to use when generating the hash. All encodings from Node.JS' hash.digest are supported. Using 'base64' for filenames might be problematic since it has the character / in its alphabet. Likewise 'latin1' could contain any character.

output.hashDigestLength

number = 20

The prefix length of the hash digest to use.

output.hashFunction

string = 'md4' function

The hashing algorithm to use. All functions from Node.JS' crypto.createHash are supported. Since 4.0.0-alpha2, the hashFunction can now be a constructor to a custom hash function. You can provide a non-crypto hash function for performance reasons.

module.exports = {
  //...
  output: {
    hashFunction: require('metrohash').MetroHash64
  }
};

Make sure that the hashing function will have update and digest methods available.

output.hashSalt

An optional salt to update the hash via Node.JS' hash.update.

output.hotUpdateChunkFilename

string = '[id].[hash].hot-update.js'

Customize the filenames of hot update chunks. See output.filename option for details on the possible values.

The only placeholders allowed here are [id] and [hash], the default being:

webpack.config.js

module.exports = {
  //...
  output: {
    hotUpdateChunkFilename: '[id].[hash].hot-update.js'
  }
};

Typically you don't need to change output.hotUpdateChunkFilename.

output.hotUpdateGlobal

string

Only used when target is set to 'web', which uses JSONP for loading hot updates.

A JSONP function used to asynchronously load hot-update chunks.

For details see output.chunkLoadingGlobal.

output.hotUpdateMainFilename

string = '[hash].hot-update.json' function

Customize the main hot update filename. [hash] is the only available placeholder.

Typically you don't need to change output.hotUpdateMainFilename.

output.library

string object

Can be given an object since webpack 3.1.0. Effective for libraryTarget: 'umd'.

How the value of the output.library is used depends on the value of the output.libraryTarget option; please refer to that section for the complete details. Note that the default option for output.libraryTarget is var, so if the following configuration option is used:

webpack.config.js

module.exports = {
  //...
  output: {
    library: 'MyLibrary'
  }
};

The variable MyLibrary will be bound with the return value of your entry file, if the resulting output is included as a script tag in an HTML page.

Note that if an array is provided as an entry point, only the last module in the array will be exposed. If an object is provided, it can be exposed using an array syntax (see this example for details).

Read the authoring libraries guide guide for more information on output.library as well as output.libraryTarget.

output.scriptType

string: 'module' | 'text/javascript' boolean = false

This option allows loading asynchronous chunks with a custom script type, such as <script type="module" ...>.

If output.module is set to true, output.scriptType will default to 'module' instead of false.

module.exports = {
  //...
  output: {
    scriptType: 'module'
  }
};

output.libraryExport

string [string]

Configure which module or modules will be exposed via the libraryTarget. It is undefined by default, same behaviour will be applied if you set libraryTarget to an empty string e.g. '' it will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when using libraryTarget: 'var'.

The following configurations are supported:

libraryExport: 'default' - The default export of your entry point will be assigned to the library target:

// if your entry has a default export of `MyDefaultModule`
var MyDefaultModule = _entry_return_.default;

libraryExport: 'MyModule' - The specified module will be assigned to the library target:

var MyModule = _entry_return_.MyModule;

libraryExport: ['MyModule', 'MySubModule'] - The array is interpreted as a path to a module to be assigned to the library target:

var MySubModule = _entry_return_.MyModule.MySubModule;

With the libraryExport configurations specified above, the resulting libraries could be utilized as such:

MyDefaultModule.doSomething();
MyModule.doSomething();
MySubModule.doSomething();

output.libraryTarget

string = 'var'

Configure how the library will be exposed. Any one of the following options can be used. Please note that this option works in conjunction with the value assigned to output.library. For the following examples, it is assumed that this value is configured as MyLibrary.

Note that _entry_return_ in the example code below is the value returned by the entry point. In the bundle itself, it is the output of the function that is generated by webpack from the entry point.

Expose a Variable

These options assign the return value of the entry point (e.g. whatever the entry point exported) to the name provided by output.library at whatever scope the bundle was included at.

libraryTarget: 'var' - (default) When your library is loaded, the return value of your entry point will be assigned to a variable:

var MyLibrary = _entry_return_;

// In a separate script...
MyLibrary.doSomething();

When using this option, an empty output.library will result in no assignment.

libraryTarget: 'assign' - This will generate an implied global which has the potential to reassign an existing value (use with caution).

MyLibrary = _entry_return_;

Be aware that if MyLibrary isn't defined earlier your library will be set in global scope.

When using this option, an empty output.library will result in a broken output bundle.

Expose Via Object Assignment

These options assign the return value of the entry point (e.g. whatever the entry point exported) to a specific object under the name defined by output.library.

If output.library is not assigned a non-empty string, the default behavior is that all properties returned by the entry point will be assigned to the object as defined for the particular output.libraryTarget, via the following code fragment:

(function(e, a) { for(var i in a) { e[i] = a[i]; } }(output.libraryTarget, _entry_return_));

Note that not setting a output.library will cause all properties returned by the entry point to be assigned to the given object; there are no checks against existing property names.

libraryTarget: "this" - The return value of your entry point will be assigned to this under the property named by output.library. The meaning of this is up to you:

this['MyLibrary'] = _entry_return_;

// In a separate script...
this.MyLibrary.doSomething();
MyLibrary.doSomething(); // if this is window

libraryTarget: 'window' - The return value of your entry point will be assigned to the window object using the output.library value.

window['MyLibrary'] = _entry_return_;

window.MyLibrary.doSomething();

libraryTarget: 'global' - The return value of your entry point will be assigned to the global object using the output.library value.

global['MyLibrary'] = _entry_return_;

global.MyLibrary.doSomething();

libraryTarget: 'commonjs' - The return value of your entry point will be assigned to the exports object using the output.library value. As the name implies, this is used in CommonJS environments.

exports['MyLibrary'] = _entry_return_;

require('MyLibrary').doSomething();

Module Definition Systems

These options will result in a bundle that comes with a more complete header to ensure compatibility with various module systems. The output.library option will take on a different meaning under the following output.libraryTarget options.

libraryTarget: 'commonjs2' - The return value of your entry point will be assigned to the module.exports. As the name implies, this is used in CommonJS environments:

module.exports = _entry_return_;

require('MyLibrary').doSomething();

Note that output.library is omitted, thus it is not required for this particular output.libraryTarget.

Wondering the difference between CommonJS and CommonJS2 is? While they are similar, there are some subtle differences between them that are not usually relevant in the context of webpack. (For further details, please read this issue.)

libraryTarget: 'amd' - This will expose your library as an AMD module.

AMD modules require that the entry chunk (e.g. the first script loaded by the <script> tag) be defined with specific properties, such as define and require which is typically provided by RequireJS or any compatible loaders (such as almond). Otherwise, loading the resulting AMD bundle directly will result in an error like define is not defined.

So, with the following configuration...

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'amd'
  }
};

The generated output will be defined with the name "MyLibrary", i.e.

define('MyLibrary', [], function() {
  return _entry_return_;
});

The bundle can be included as part of a script tag, and the bundle can be invoked like so:

require(['MyLibrary'], function(MyLibrary) {
  // Do something with the library...
});

If output.library is undefined, the following is generated instead.

define([], function() {
  return _entry_return_;
});

This bundle will not work as expected, or not work at all (in the case of the almond loader) if loaded directly with a <script> tag. It will only work through a RequireJS compatible asynchronous module loader through the actual path to that file, so in this case, the output.path and output.filename may become important for this particular setup if these are exposed directly on the server.

libraryTarget: 'amd-require' - This packages your output with an immediately-executed AMD require(dependencies, factory) wrapper.

The 'amd-require' target allows for the use of AMD dependencies without needing a separate later invocation. As with the 'amd' target, this depends on the appropriate require function being available in the environment in which the webpack output is loaded.

With this target, the library name is ignored.

libraryTarget: 'umd' - This exposes your library under all the module definitions, allowing it to work with CommonJS, AMD and as global variable. Take a look at the UMD Repository to learn more.

In this case, you need the library property to name your module:

module.exports = {
  //...
  output: {
    library: 'MyLibrary',
    libraryTarget: 'umd'
  }
};

And finally the output is:

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

Note that omitting library will result in the assignment of all properties returned by the entry point be assigned directly to the root object, as documented under the object assignment section. Example:

module.exports = {
  //...
  output: {
    libraryTarget: 'umd'
  }
};

The output will be:

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else {
    var a = factory();
    for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
  }
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

Since webpack 3.1.0, you may specify an object for library for differing names per targets:

module.exports = {
  //...
  output: {
    library: {
      root: 'MyLibrary',
      amd: 'my-library',
      commonjs: 'my-common-library'
    },
    libraryTarget: 'umd'
  }
};

libraryTarget: 'system' - This will expose your library as a System.register module. This feature was first released in webpack 4.30.0.

System modules require that a global variable System is present in the browser when the webpack bundle is executed. Compiling to System.register format allows you to System.import('/bundle.js') without additional configuration and have your webpack bundle loaded into the System module registry.

module.exports = {
  //...
  output: {
    libraryTarget: 'system'
  }
};

Output:

System.register([], function(_export) {
  return {
    setters: [],
    execute: function() {
      // ...
    },
  };
});

By adding output.library to configuration in addition to having output.libraryTarget set to system, the output bundle will have the library name as an argument to System.register:

System.register('my-library', [], function(_export) {
  return {
    setters: [],
    execute: function() {
      // ...
    },
  };
});

You can access SystemJS context via __system_context__:

// Log the URL of the current SystemJS module
console.log(__system_context__.meta.url);

// Import a SystemJS module, with the current SystemJS module's url as the parentUrl
__system_context__.import('./other-file.js').then(m => {
  console.log(m);
});

Other Targets

libraryTarget: 'jsonp' - This will wrap the return value of your entry point into a jsonp wrapper.

MyLibrary(_entry_return_);

The dependencies for your library will be defined by the externals config.

output.importFunctionName

string = 'import'

The name of the native import() function. Can be used for polyfilling, e.g. with dynamic-import-polyfill.

webpack.config.js

module.exports = {
  //...
  output: {
    importFunctionName: '__import__'
  }
};

output.path

string = path.join(process.cwd(), 'dist')

The output directory as an absolute path.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist/assets')
  }
};

Note that [fullhash] in this parameter will be replaced with a hash of the compilation. See the Caching guide for details.

output.pathinfo

boolean

Tells webpack to include comments in bundles with information about the contained modules. This option defaults to true in development and false in production mode respectively.

While the data this comments can provide is very useful during development when reading the generated code, it should not be used in production.

webpack.config.js

module.exports = {
  //...
  output: {
    pathinfo: true
  }
};

It also adds some info about tree shaking to the generated bundle.

output.publicPath

string = '' function

This is an important option when using on-demand-loading or loading external resources like images, files, etc. If an incorrect value is specified you'll receive 404 errors while loading these resources.

This option specifies the public URL of the output directory when referenced in a browser. A relative URL is resolved relative to the HTML page (or <base> tag). Server-relative URLs, protocol-relative URLs or absolute URLs are also possible and sometimes required, i. e. when hosting assets on a CDN.

The value of the option is prefixed to every URL created by the runtime or loaders. Because of this the value of this option ends with / in most cases.

Simple rule: The URL of your output.path from the view of the HTML page.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'public/assets'),
    publicPath: 'https://cdn.example.com/assets/'
  }
};

For this configuration:

webpack.config.js

module.exports = {
  //...
  output: {
    publicPath: '/assets/',
    chunkFilename: '[id].chunk.js'
  }
};

A request to a chunk will look like /assets/4.chunk.js.

A loader outputting HTML might emit something like this:

<link href="/assets/spinner.gif" />

or when loading an image in CSS:

background-image: url(/assets/spinner.gif);

The webpack-dev-server also takes a hint from publicPath, using it to determine where to serve the output files from.

Note that [fullhash] in this parameter will be replaced with a hash of the compilation. See the Caching guide for details.

Examples:

module.exports = {
  //...
  output: {
    // One of the below
    publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
    publicPath: '/assets/', // server-relative
    publicPath: 'assets/', // relative to HTML page
    publicPath: '../assets/', // relative to HTML page
    publicPath: '', // relative to HTML page (same directory)
  }
};

In cases where the publicPath of output files can't be known at compile time, it can be left blank and set dynamically at runtime in the entry file using the free variable __webpack_public_path__.

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

See this discussion for more information on __webpack_public_path__.

output.sourceMapFilename

string = '[file].map[query]'

Configure how source maps are named. Only takes effect when devtool is set to 'source-map', which writes an output file.

The [name], [id], [fullhash] and [chunkhash] substitutions from output.filename can be used. In addition to those, you can use substitutions listed under Filename-level in Template strings.

output.sourcePrefix

string = ''

Change the prefix for each line in the output bundles.

webpack.config.js

module.exports = {
  //...
  output: {
    sourcePrefix: '\t'
  }
};

Using some kind of indentation makes bundles look prettier, but will cause issues with multi-line strings.

Typically you don't need to change output.sourcePrefix.

output.strictModuleExceptionHandling

boolean = false

Tell webpack to remove a module from the module instance cache (require.cache) if it throws an exception when it is required.

It defaults to false for performance reasons.

When set to false, the module is not removed from cache, which results in the exception getting thrown only on the first require call (making it incompatible with node.js).

For instance, consider module.js:

throw new Error('error');

With strictModuleExceptionHandling set to false, only the first require throws an exception:

// with strictModuleExceptionHandling = false
require('module'); // <- throws
require('module'); // <- doesn't throw

Instead, with strictModuleExceptionHandling set to true, all requires of this module throw an exception:

// with strictModuleExceptionHandling = true
require('module'); // <- throws
require('module'); // <- also throws

output.umdNamedDefine

boolean

When using libraryTarget: "umd", setting output.umdNamedDefine to true will name the AMD module of the UMD build. Otherwise an anonymous define is used.

module.exports = {
  //...
  output: {
    umdNamedDefine: true
  }
};

output.workerChunkLoading

string: 'require' | 'import-scripts' | 'async-node' | 'import' | 'universal' boolean: false

The new option workerChunkLoading controls the chunk loading of workers.

The default value of this option is depending on the target setting. For more details, search for "workerChunkLoading": in the webpack defaults.

webpack.config.js

module.exports = {
  //...
  output: {
    workerChunkLoading: false
  }
};

output.enabledLibraryTypes

[string]

List of library types enabled for use by entry points.

module.exports = {
  //...
  output: {
    enabledLibraryTypes: ['module']
  }
};

output.futureEmitAssets

boolean = false

Tells webpack to use the future version of asset emitting logic, which allows freeing memory of assets after emitting. It could break plugins which assume that assets are still readable after they were emitted.

output.futureEmitAssets option will be removed in webpack v5.0.0 and this behaviour will become the new default.

module.exports = {
  //...
  output: {
    futureEmitAssets: true
  }
};

output.environment

Tell webpack what kind of ES-features may be used in the generated runtime-code.

module.exports = {
  output: {
    environment: {
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: true,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports const and let for variable declarations.
      const: true,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: true,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: true,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
    }
  }
};

output.compareBeforeEmit

boolean = true

Tells webpack to check if to be emitted file already exists and has the same content before writing to the output file system.

webpack will not write output file when file already exists on disk with the same content.

module.exports = {
  //...
  output: {
    compareBeforeEmit: false
  }
};

output.wasmLoading

boolean = false string

Option to set the method of loading WebAssembly Modules. Methods included by default are 'fetch' (web/WebWorker), 'async-node' (Node.js), but others might be added by plugins.

The default value can be affected by different target:

• Defaults to 'fetch' if target is set to 'web', 'webworker', 'electron-renderer' or 'node-webkit'.
• Defaults to 'async-node' if target is set to 'node', 'async-node', 'electron-main' or 'electron-preload'.

module.exports = {
  //...
  output: {
    wasmLoading: 'fetch'
  }
};

output.enabledWasmLoadingTypes

[string]

List of wasm loading types enabled for use by entry points.

module.exports = {
  //...
  output: {
    enabledWasmLoadingTypes: ['fetch']
  }
};

output.iife

boolean = true

Tells webpack to add IIFE wrapper around emitted code.

module.exports = {
  //...
  output: {
    iife: true
  }
};

output.module

boolean = true

Allow outputting JavaScript files as module type. It sets output.iife to false, output.libraryTarget to 'module', output.scriptType to 'module' and terserOptions.module to true

output.module is an experimental feature and can be enabled by setting experiments.outputModule to true.

module.exports = {
  //...
  output: {
    module: true
  }
};