The top-leveloutput key contains a 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.assetModuleFilename

string = '[hash][ext][query]'function (pathData, assetInfo) => string

The same asoutput.filename but forAsset Modules.

[name],[file],[query],[fragment],[base], and[path] are set to an empty string for the assets built from data URI replacements.

output.asyncChunks

boolean = true

Create async chunks that are loaded on demand.

webpack.config.js

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

output.auxiliaryComment

Prefer to useoutput.library.auxiliaryComment instead.

stringobject

When used in tandem withoutput.library andoutput.libraryTarget, this option allows users to insert comments within the export wrapper. To insert the same comment for eachlibraryTarget type, setauxiliaryComment 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

(functionwebpackUniversalModuleDefinition(root, factory){// Test Commentif(typeof exports==='object'&&typeof module==='object')    module.exports=factory(require('lodash'));// Test Commentelseif(typeof define==='function'&& define.amd)define(['lodash'], factory);// Test Commentelseif(typeof exports==='object')    exports['someLibName']=factory(require('lodash'));// Test Commentelse root['someLibName']=factory(root['_']);})(this,function(__WEBPACK_EXTERNAL_MODULE_1__){// ...});

For fine-grained control over eachlibraryTarget 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 addcharset="utf-8" to the HTML<script> tag.

Although thecharset attribute for<script> tag wasdeprecated, 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. Seeoutput.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 fromoutput.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.chunkFormat

falsestring: 'array-push' | 'commonjs' | 'module' | <any string>

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

The default value of this option depends on thetarget andoutput.module setting. For more details, search for"chunkFormat"in the webpack defaults.

webpack.config.js

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

output.chunkLoadTimeout

number = 120000

The 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 is used by webpack for loading chunks.

webpack.config.js

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

output.chunkLoading

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

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

The default value of this option depends on thetarget andchunkFormat setting. For more details, search for"chunkLoading"in the webpack defaults.

webpack.config.js

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

output.clean

boolean{ dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }

module.exports={//...  output:{    clean:true,// Clean the output directory before emit.},};

module.exports={//...  output:{    clean:{      dry:true,// Log the assets that should be removed instead of deleting them.},},};

module.exports={//...  output:{    clean:{      keep:/ignored\/dir\//,// Keep these assets under 'ignored/dir'.},},};// ormodule.exports={//...  output:{    clean:{keep(asset){return asset.includes('ignored/dir');},},},};

You can also use it with hook:

webpack.CleanPlugin.getCompilationHooks(compilation).keep.tap('Test',(asset)=>{if(/ignored\/dir\//.test(asset))returntrue;});

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.

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

output.crossOriginLoading

boolean = falsestring: 'anonymous' | 'use-credentials'

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

• 'anonymous' - Enable cross-origin loadingwithout credentials
• 'use-credentials' - Enable cross-origin loadingwith credentials

output.cssChunkFilename

stringfunction (pathData, assetInfo) => string

This option determines the name of non-initial CSS output files on disk. Seeoutput.filename option for details on the possible values.

Youmust not specify an absolute path here. However, feel free to include folders separated by'/'. This specified path combines with theoutput.path value to pinpoint the location on the disk.

output.cssFilename

stringfunction (pathData, assetInfo) => string

This option determines the name of CSS output files on disk. Seeoutput.filename option for details on the possible values.

Youmust not specify an absolute path here. However, feel free to include folders separated by'/'. This specified path combines with theoutput.path value to pinpoint the location on the disk.

output.devtoolFallbackModuleFilenameTemplate

stringfunction (info)

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

Seeoutput.devtoolModuleFilenameTemplate.

output.devtoolModuleFilenameTemplate

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

This option is only used whendevtool uses an option that requires module names.

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

webpack.config.js

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

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

When using a function, the same options are available camel-cased via theinfo 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 module's namespace used with theoutput.devtoolModuleFilenameTemplate. When not specified, it will default to the value of:output.uniqueName. 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 namespaceslibrary1 andlibrary2, which both have a file./src/index.js (with potentially different contents), they will expose these files aswebpack://library1/./src/index.js andwebpack://library2/./src/index.js.

You can use template strings like[name] to dynamically generate namespaces based on the build context, providing additional flexibility.

webpack.config.js

module.exports={//...  output:{    filename:'[name]-bundle.js',    library:'library-[name]',    libraryTarget:'commonjs',    devtoolNamespace:'library-[name]',// Sets a unique namespace for each library},};

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.enabledLibraryTypes

[string]

List of library types enabled for use by entry points.

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

output.enabledWasmLoadingTypes

[string]

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

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

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 async function and await ('async function () { await ... }').      asyncFunction: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 'document' variable.      document:true,// The environment supports an async import() function to import EcmaScript modules.      dynamicImport:false,// The environment supports an async import() when creating a worker, only for web targets at the moment.      dynamicImportInWorker:false,// The environment supports 'for of' iteration ('for (const x of array) { ... }').      forOf:true,// The environment supports 'globalThis'.      globalThis:true,// The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').      module:false,// Determines if the node: prefix is generated for core module imports in environments that support it.// This is only applicable to Webpack runtime code.      nodePrefixForCoreModules:false,// The environment supports optional chaining ('obj?.a' or 'obj?.()').      optionalChaining:true,// The environment supports template literals.      templateLiteral:true,},},};

output.filename

stringfunction (pathData, assetInfo) => string

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

For a singleentry 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 the 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 theCaching guide for details. There are more steps involved than only 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, theoutput.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 internalTemplatedPathPlugin):

Substitutions available on Compilation-level:

Substitutions available on Chunk-level:

Substitutions available on Module-level:

Substitutions available on File-level:

Substitutions available on URL-level:

The length of hashes ([hash],[contenthash] or[chunkhash]) can be specified using[hash:16] (defaults to 20). Alternatively, specifyoutput.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 thename of the asset.

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

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

typePathData={  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;};typeChunkPathData={  id:string|number;  name:string;  hash:string;hashWithLength:(number)=>string;  contentHash: Record<string,string>;  contentHashWithLength: Record<string,(number)=>string>;};typeModulePathData={  id:string|number;  hash:string;hashWithLength:(number)=>string;};

output.globalObject

string = 'self'

When targeting a library, especially whenlibrary.type 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, setoutput.globalObject option to'this'. Defaults toself for Web-like targets.

The return value of your entry point will be assigned to the global object using the value ofoutput.library.name. Depending on the value of thetype option, the global object could change respectively, e.g.,self,global, orglobalThis.

For example:

webpack.config.js

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

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.

Forwebpack v5.65.0+,16 will be used as the default value for thehashDigestLength option whenexperiments.futureDefaults is enabled.

output.hashFunction

string = 'md4'function

The hashing algorithm to use. All functions from Node.JS'crypto.createHash are supported. Since4.0.0-alpha2, thehashFunction 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 anupdate anddigest methods available.

Sincewebpack v5.54.0+,hashFunction supportsxxhash64 as a faster algorithm, which will be used as default whenexperiments.futureDefaults is enabled.

output.hashSalt

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

output.hotUpdateChunkFilename

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

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

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

webpack.config.js

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

output.hotUpdateGlobal

string

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

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

For details seeoutput.chunkLoadingGlobal.

output.hotUpdateMainFilename

string = '[runtime].[fullhash].hot-update.json'function

Customize the main hot update filename.[fullhash] and[runtime] are available as placeholder.

output.iife

boolean = true

Tells webpack to addIIFE wrapper around emitted code.

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

output.ignoreBrowserWarnings

boolean = false

Hide warnings from the browser console in production. This option does not affect the terminal/console output.

webpack.config.js

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

output.importFunctionName

string = 'import'

The name of the nativeimport() function. Can be used for polyfilling, e.g. withdynamic-import-polyfill.

webpack.config.js

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

output.importMetaName

string

The name of the nativeimport.meta object (can be exchanged for a polyfill).

webpack.config.js

module.exports={//...  output:{    importMetaName:'pseudoImport.meta',},};

output.library

Output a library exposing the exports of your entry point.

• Type:string | string[] | object

Let's take a look at an example.

webpack.config.js

module.exports={// …  entry:'./src/index.js',  output:{    library:'MyLibrary',},};

Say you have exported a function in yoursrc/index.js entry:

exportfunctionhello(name){  console.log(`hello${name}`);}

Now the variableMyLibrary will be bound with the exports of your entry file, and here's how to consume the webpack bundled library:

<scriptsrc="https://example.org/path/to/my-library.js"></script><script>  MyLibrary.hello('webpack');</script>

In the above example, we're passing a single entry file toentry, however, webpack can acceptmany kinds of entry point, e.g., anarray, or anobject.

1. If you provide anarray as theentry point, only the last one in the array will be exposed.

   module.exports={// …  entry:['./src/a.js','./src/b.js'],// only exports in b.js will be exposed  output:{    library:'MyLibrary',},};

2. If anobject is provided as theentry point, all entries can be exposed using thearray syntax oflibrary:

   module.exports={// …  entry:{    a:'./src/a.js',    b:'./src/b.js',},  output:{    filename:'[name].js',    library:['MyLibrary','[name]'],// name is a placeholder here},};

   Assuming that botha.js andb.js export a functionhello, here's how to consume the libraries:

   <scriptsrc="https://example.org/path/to/a.js"></script><scriptsrc="https://example.org/path/to/b.js"></script><script>  MyLibrary.a.hello('webpack');  MyLibrary.b.hello('webpack');</script>

   Seethis example for more.

   Note that the above configuration won't work as expected if you're going to configure library options per entry point. Here is how to do itunder each of your entries:

   module.exports={// …  entry:{    main:{import:'./src/index.js',      library:{// all options under `output.library` can be used here        name:'MyLibrary',        type:'umd',        umdNamedDefine:true,},},    another:{import:'./src/another.js',      library:{        name:'AnotherLibrary',        type:'commonjs2',},},},};

output.library.amdContainer

Use a container(defined in global space) for callingdefine/require functions in an AMD module.

module.exports={// …  output:{    library:{      amdContainer:'window["clientContainer"]',      type:'amd',// or 'amd-require'},},};

window['clientContainer'].define(/*define args*/);// or 'amd-require' window['clientContainer'].require(/*require args*/);

output.library.name

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

Specify a name for the library.

• Type:

  string|string[]|{amd?:string, commonjs?:string, root?:string|string[]}

output.library.type

Configure how the library will be exposed.

• Type:string

  Types included by default are'var','module','modern-module','assign','assign-properties','this','window','self','global','commonjs','commonjs2','commonjs-module','commonjs-static','amd','amd-require','umd','umd2','jsonp' and'system', but others might be added by plugins.

For the following examples, we'll use_entry_return_ to indicate the values returned by 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 byoutput.library.name at whatever scope the bundle was included at.

type: 'var'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'var',},},};

When your library is loaded, thereturn value of your entry point will be assigned to a variable:

var MyLibrary= _entry_return_;// In a separate script with `MyLibrary` loaded…MyLibrary.doSomething();

type: 'assign'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'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 ifMyLibrary isn't defined earlier your library will be set in global scope.

type: 'assign-properties'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'assign-properties',},},};

Similar totype: 'assign' but a safer option as it will reuseMyLibrary if it already exists:

// only create MyLibrary if it doesn't existMyLibrary=typeof MyLibrary==='undefined'?{}: MyLibrary;// then copy the return value to MyLibrary// similarly to what Object.assign does// for instance, you export a `hello` function in your entry as followexportfunctionhello(name){  console.log(`Hello${name}`);}// In another script with MyLibrary loaded// you can run `hello` function like soMyLibrary.hello('World');

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 byoutput.library.name.

type: 'this'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'this',},},};

Thereturn value of your entry point will be assigned tothis under the property named byoutput.library.name. The meaning ofthis is up to you:

this['MyLibrary']= _entry_return_;// In a separate script...this.MyLibrary.doSomething();MyLibrary.doSomething();// if `this` is window

type: 'window'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'window',},},};

Thereturn value of your entry point will be assigned to thewindow object using theoutput.library.name value.

window['MyLibrary']= _entry_return_;window.MyLibrary.doSomething();

type: 'global'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'global',},},};

Thereturn value of your entry point will be assigned to the global object using theoutput.library.name value. Depending on thetarget value, the global object could change respectively, e.g.,self,global orglobalThis.

global['MyLibrary']= _entry_return_;global.MyLibrary.doSomething();

type: 'commonjs'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'commonjs',},},};

Thereturn value of your entry point will be assigned to theexports object using theoutput.library.name 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 complete header to ensure compatibility with various module systems. Theoutput.library.name option will take on a different meaning under the followingoutput.library.type options.

type: 'module'

module.exports={// …  experiments:{    outputModule:true,},  output:{    library:{// do not specify a `name` here      type:'module',},},};

Output ES Module.

However this feature is still experimental and not fully supported yet, so make sure to enableexperiments.outputModule beforehand. In addition, you can track the development progress inthis thread.

type: 'modern-module'

module.exports={// …  experiments:{    outputModule:true,},  output:{    library:{// do not specify a `name` here      type:'modern-module',},},};

This configuration generates tree-shakable output for ES Modules.

However this feature is still experimental and not fully supported yet, so make sure to enableexperiments.outputModule beforehand.

type: 'commonjs2'

module.exports={// …  output:{    library:{// note there's no `name` here      type:'commonjs2',},},};

Thereturn value of your entry point will be assigned to themodule.exports. As the name implies, this is used in Node.js (CommonJS) environments:

module.exports= _entry_return_;require('MyLibrary').doSomething();

If we specifyoutput.library.name withtype: commmonjs2, the return value of your entry point will be assigned to themodule.exports.[output.library.name].

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, pleaseread this issue.)

type: 'commonjs-module'

commonjs-module is equivalent tocommonjs2. We may removecommonjs-module in future versions.

type: 'commonjs-static'

module.exports={// …  output:{    library:{// note there's no `name` here      type:'commonjs-static',},},};

Individual exports will be set as properties onmodule.exports. The "static" in the name refers to the output being statically analysable, and thus named exports are importable into ESM via Node.js:

Input:

exportfunctiondoSomething(){}

Output:

functiondoSomething(){}// …exports.doSomething= __webpack_exports__.doSomething;

Consumption (CommonJS):

const{ doSomething}=require('./output.cjs');// doSomething => [Function: doSomething]

Consumption (ESM):

import{ doSomething}from'./output.cjs';// doSomething => [Function: doSomething]

This is useful when source code is written in ESM and the output should be compatible with both CJS and ESM. For further details, pleaseread this issue orthis article (specifically,this section).

type: '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 todefine andrequire 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 likedefine is not defined.

With the following configuration...

module.exports={//...  output:{    library:{      name:'MyLibrary',      type:'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...});

Ifoutput.library.name 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, theoutput.path andoutput.filename may become important for this particular setup if these are exposed directly on the server.

type: 'amd-require'

module.exports={//...  output:{    library:{      name:'MyLibrary',      type:'amd-require',},},};

This packages your output with an immediately executed AMDrequire(dependencies, factory) wrapper.

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

With this type, the library name can't be used.

type: '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 theUMD Repository to learn more.

In this case, you need thelibrary.name property to name your module:

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

And finally the output is:

(functionwebpackUniversalModuleDefinition(root, factory){if(typeof exports==='object'&&typeof module==='object')    module.exports=factory();elseif(typeof define==='function'&& define.amd)define([], factory);elseif(typeof exports==='object') exports['MyLibrary']=factory();else root['MyLibrary']=factory();})(global,function(){return _entry_return_;});

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

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

The output will be:

(functionwebpackUniversalModuleDefinition(root, factory){if(typeof exports==='object'&&typeof module==='object')    module.exports=factory();elseif(typeof define==='function'&& define.amd)define([], factory);else{var a=factory();for(var iin a)(typeof exports==='object'? exports: root)[i]= a[i];}})(global,function(){return _entry_return_;});

You may specify an object forlibrary.name for differing names per targets:

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

type: 'system'

This will expose your library as aSystem.register module. This feature was first released inwebpack 4.30.0.

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

module.exports={//...  output:{    library:{      type:'system',},},};

Output:

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

By addingoutput.library.name to configuration in addition to havingoutput.library.type set tosystem, the output bundle will have the library name as an argument toSystem.register:

System.register('MyLibrary',[],function(__WEBPACK_DYNAMIC_EXPORT__, __system_context__){return{execute:function(){// ...},};});

Other Types

type: 'jsonp'

module.exports={// …  output:{    library:{      name:'MyLibrary',      type:'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 theexternals config.

Read theauthoring libraries guide guide for more information onoutput.library.name as well asoutput.library.type.

output.library.export

Specify which export should be exposed as a library.

• Type:string | string[]

It isundefined by default, which will export the whole (namespace) object. The examples below demonstrate the effect of this configuration when usingoutput.library.type: 'var'.

module.exports={  output:{    library:{      name:'MyLibrary',      type:'var',export:'default',},},};

The default export of your entry point will be assigned to the library name:

// if your entry has a default exportvar MyLibrary= _entry_return_.default;

You can pass an array tooutput.library.export as well, it will be interpreted as a path to a module to be assigned to the library name:

module.exports={  output:{    library:{      name:'MyLibrary',      type:'var',export:['default','subModule'],},},};

And here's the library code:

var MyLibrary= _entry_return_.default.subModule;

output.library.auxiliaryComment

Add a comment in the UMD wrapper.

• Type:string | { amd?: string, commonjs?: string, commonjs2?: string, root?: string }

To insert the same comment for eachumd type, setauxiliaryComment to a string:

module.exports={// …  mode:'development',  output:{    library:{      name:'MyLibrary',      type:'umd',      auxiliaryComment:'Test Comment',},},};

which will yield the following:

(functionwebpackUniversalModuleDefinition(root, factory){//Test Commentif(typeof exports==='object'&&typeof module==='object')    module.exports=factory();//Test Commentelseif(typeof define==='function'&& define.amd)define([], factory);//Test Commentelseif(typeof exports==='object') exports['MyLibrary']=factory();//Test Commentelse root['MyLibrary']=factory();})(self,function(){return _entry_return_;});

For fine-grained control, pass an object:

module.exports={// …  mode:'development',  output:{    library:{      name:'MyLibrary',      type:'umd',      auxiliaryComment:{        root:'Root Comment',        commonjs:'CommonJS Comment',        commonjs2:'CommonJS2 Comment',        amd:'AMD Comment',},},},};

output.library.umdNamedDefine

boolean

When usingoutput.library.type: "umd", settingoutput.library.umdNamedDefine totrue will name the AMD module of the UMD build. Otherwise, an anonymousdefine is used.

module.exports={//...  output:{    library:{      name:'MyLibrary',      type:'umd',      umdNamedDefine:true,},},};

The AMD module will be:

define('MyLibrary',[], factory);

output.libraryExport

We might drop support for this, so prefer to useoutput.library.export which works the same aslibraryExport.

string[string]

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

The following configurations are supported:

libraryExport: 'default' - Thedefault 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' - Thespecified module will be assigned to the library target:

var MyModule= _entry_return_.MyModule;

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

var MySubModule= _entry_return_.MyModule.MySubModule;

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

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

output.libraryTarget

string = 'var'

Please useoutput.library.type instead as we might drop support foroutput.libraryTarget in the future.

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 tooutput.library. For the following examples, it is assumed that the value ofoutput.library is configured asMyLibrary.

Expose a Variable

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

libraryTarget: 'var'

Prefer to useoutput.library.type: 'var'.

When your library is loaded, thereturn value of your entry point will be assigned to a variable:

var MyLibrary= _entry_return_;// In a separate script...MyLibrary.doSomething();

libraryTarget: 'assign'

Prefer to useoutput.library.type: '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 ifMyLibrary isn't defined earlier your library will be set in the global scope.

libraryTarget: 'assign-properties'

Prefer to useoutput.library.type: 'assign-properties'`.

Copy the return value to a target object if it exists, otherwise create the target object first:

// create the target object if it doesn't existMyLibrary=typeof MyLibrary==='undefined'?{}: MyLibrary;// then copy the return value to MyLibrary// similarly to what Object.assign does// for instance, you export a `hello` function in your entry as followexportfunctionhello(name){  console.log(`Hello${name}`);}// In another script running MyLibrary// you can run `hello` function like soMyLibrary.hello('World');

An empty string for theoutput.library is invalid, make sure you specify a valid identifier that could be assigned.

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 byoutput.library.

Ifoutput.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 particularoutput.libraryTarget, via the following code fragment:

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

libraryTarget: 'this'

Prefer to useoutput.library.type: 'this'.

Thereturn value of your entry point will be assigned to this under the property named byoutput.library. The meaning ofthis is up to you:

this['MyLibrary']= _entry_return_;// In a separate script...this.MyLibrary.doSomething();MyLibrary.doSomething();// if this is window

libraryTarget: 'window'

Prefer to useoutput.library.type: 'window'.

Thereturn value of your entry point will be assigned to thewindow object using theoutput.library value.

window['MyLibrary']= _entry_return_;window.MyLibrary.doSomething();

libraryTarget: 'global'

Prefer to useoutput.library.type: 'global'.

Thereturn value of your entry point will be assigned to theglobal object using theoutput.library value.

global['MyLibrary']= _entry_return_;global.MyLibrary.doSomething();

libraryTarget: 'commonjs'

Prefer to useoutput.library.type: 'commonjs'.

Thereturn value of your entry point will be assigned to theexports object using theoutput.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 complete header to ensure compatibility with various module systems. Theoutput.library option will take on a different meaning under the followingoutput.libraryTarget options.

libraryTarget: 'module'

Prefer to useoutput.library.type: 'module'.

Output ES Module. Make sure to enableexperiments.outputModule beforehand.

Note that this feature is not fully supported yet, please track the progress inthis thread.

libraryTarget: 'commonjs2'

Prefer to useoutput.library.type: 'commonjs2'.

Thereturn value of your entry point will be assigned to themodule.exports. As the name implies, this is used in CommonJS environments:

module.exports= _entry_return_;require('MyLibrary').doSomething();

Note thatoutput.library can't be used with this particularoutput.libraryTarget, for further details, pleaseread this issue.

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, pleaseread this issue.)

libraryTarget: 'amd'

Prefer to useoutput.library.type: '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 todefine andrequire 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 likedefine is not defined.

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...});

Ifoutput.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, theoutput.path andoutput.filename may become important for this particular setup if these are exposed directly on the server.

libraryTarget: 'amd-require'

Prefer to useoutput.library.type: 'amd-require'.

This packages your output with an immediately executed AMDrequire(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 appropriaterequire function being available in the environment in which the webpack output is loaded.

With this target, the library name is ignored.

libraryTarget: 'umd'

Prefer to useoutput.library.type: 'umd'.

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

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

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

And finally the output is:

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

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

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

The output will be:

(functionwebpackUniversalModuleDefinition(root, factory){if(typeof exports==='object'&&typeof module==='object')    module.exports=factory();elseif(typeof define==='function'&& define.amd)define([], factory);else{var a=factory();for(var iin 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 forlibrary for differing names per targets:

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

libraryTarget: 'system'

Prefer to useoutput.library.type: 'system'.

This will expose your library as aSystem.register module. This feature was first released inwebpack 4.30.0.

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

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

Output:

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

By addingoutput.library to configuration in addition to havingoutput.libraryTarget set tosystem, the output bundle will have the library name as an argument toSystem.register:

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

You can accessSystemJS context via__system_context__:

// Log the URL of the current SystemJS moduleconsole.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'

Prefer to useoutput.library.type: '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 theexternals config.

output.module

boolean = false

Output JavaScript files as module type. Disabled by default as it's an experimental feature.

When enabled, webpack will setoutput.iife tofalse,output.scriptType to'module' andterserOptions.module totrue internally.

If you're using webpack to compile a library to be consumed by others, make sure to setoutput.libraryTarget to'module' whenoutput.module istrue.

module.exports={//...  experiments:{    outputModule:true,},  output:{    module:true,},};

output.module is an experimental feature and can only be enabled by settingexperiments.outputModule totrue.One of the known problems is that such a library can't be consumed by webpack4-based (and possibly other too) applications.

output.path

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

The output directory as anabsolute 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 theCaching guide for details.

The path must not contain an exclamation mark (!) as it is reserved by webpack forloader syntax.

output.pathinfo

boolean=truestring: 'verbose'

Tells webpack to include comments in bundles with information about the contained modules. This option defaults totrue indevelopment andfalse inproductionmode respectively.'verbose' shows more information like exports, runtime requirements and bailouts.

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

output.publicPath

• Type:

  • function

  • string

    output.publicPath defaults to'auto' withweb andweb-worker targets, seethis guide for its use cases.

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 thepublic 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 thisthe value of this option ends with/ in most cases.

A rule to consider: The URL of youroutput.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:

<linkhref="/assets/spinner.gif"/>

or when loading an image in CSS:

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

The webpack-dev-server also takes a hint frompublicPath, 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 theCaching guide for details.

Examples:

module.exports={//...  output:{// One of the below    publicPath:'auto',// It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `<script />` or `self.location`.    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 thepublicPath 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 thefree variable__webpack_public_path__.

__webpack_public_path__= myRuntimePublicPath;// rest of your application entry

Seethis discussion for more information on__webpack_public_path__.

output.scriptType

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

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

Ifoutput.module is set totrue,output.scriptType will default to'module' instead offalse.

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

output.sourceMapFilename

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

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

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

output.sourcePrefix

string = ''

Change the prefix for each line in the output bundles.

webpack.config.js

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

output.strictModuleErrorHandling

Handle error in module loading as per EcmaScript Modules spec at a performance cost.

• Type:boolean
• Available: 5.25.0+

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

output.strictModuleExceptionHandling

Deprecated, useoutput.strictModuleErrorHandling instead.

boolean = false

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

It defaults tofalse for performance reasons.

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

For instance, considermodule.js:

thrownewError('error');

WithstrictModuleExceptionHandling set tofalse, only the firstrequire throws an exception:

// with strictModuleExceptionHandling = falserequire('module');// <- throwsrequire('module');// <- doesn't throw

Instead, withstrictModuleExceptionHandling set totrue, allrequires of this module throw an exception:

// with strictModuleExceptionHandling = truerequire('module');// <- throwsrequire('module');// <- also throws

output.trustedTypes

truestringobject

ControlsTrusted Types compatibility. When enabled, webpack will detect Trusted Types support and, if they are supported, use Trusted Types policies to create script URLs it loads dynamically. Use when the application runs under arequire-trusted-types-for Content Security Policy directive.

It is disabled by default (no compatibility, script URLs are strings).

• When set totrue, webpack will useoutput.uniqueName as the Trusted Types policy name.
• When set to a non-empty string, its value will be used as a policy name.
• When set to an object, the policy name is taken from the object'spolicyName property.

webpack.config.js

module.exports={//...  output:{//...    trustedTypes:{      policyName:'my-application#webpack',},},};

output.trustedTypes.onPolicyCreationFailure

string = 'stop': 'continue' | 'stop'

Determine whether to proceed with loading in anticipation thatrequire-trusted-types-for 'script' has not been enforced or to immediately fail when the call totrustedTypes.createPolicy(...) fails due to the policy name being absent from the CSPtrusted-types list or being a duplicate.

module.exports={//...  output:{//...    trustedTypes:{      policyName:'my-application#webpack',      onPolicyCreationFailure:'continue',},},};

output.umdNamedDefine

Prefer to useoutput.library.umdNamedDefine instead.

boolean

When usinglibraryTarget: "umd", settingoutput.umdNamedDefine totrue will name the AMD module of the UMD build. Otherwise an anonymousdefine is used.

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

output.uniqueName

string

A unique name of the webpack build to avoid multiple webpack runtimes to conflict when using globals. It defaults tooutput.library name or the package name frompackage.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.wasmLoading

false'fetch' | 'async-node'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 differenttarget:

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

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

output.webassemblyModuleFilename

string = '[hash].module.wasm'

Specifies the filename of WebAssembly modules. It should be provided as a relative path within theoutput.path directory

module.exports={//...  output:{    webassemblyModuleFilename:'[id].[hash].wasm',},};

output.workerChunkLoading

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

The new optionworkerChunkLoading controls the chunk loading of workers.

The default value of this option depends on thetarget setting. For more details, search for"workerChunkLoading"in the webpack defaults.

webpack.config.js

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

output.workerPublicPath

string

Set a public path for Worker, defaults to value ofoutput.publicPath. Only use this option if your worker scripts are located in a different path from your other scripts.

webpack.config.js

module.exports={//...  output:{    workerPublicPath:'/workerPublicPath2/',},};

output.workerWasmLoading

false'fetch-streaming' | 'fetch' | 'async-node'string

Option to set the method of loading WebAssembly Modules in workers, defaults to the value ofoutput.wasmLoading.

webpack.config.js

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

29 Contributors