Output | webpack

The top-level output 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.
string = '[hash][ext][query][fragment]' (pathData: PathData, assetInfo?: AssetInfo) => string
The same as output.filename but for Asset Modules.
For assets built from data URI modules, [file], [query], [fragment] and [path] are set to an empty string, [name] and [base] resolve to the content hash, and [ext] is derived from the MIME type.
Create async chunks that are loaded on demand.
Prefer to use output.library.auxiliaryComment instead.
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:
which will yield the following:
For fine-grained control over each libraryTarget comment, pass an object:
Tells webpack to add charset="utf-8" to the HTML <script> tag.
Although the charset attribute for <script> tag was deprecated, webpack still adds it by default for compatibility with non-modern browsers.
string = '[id].js' (pathData: PathData, assetInfo?: 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.
Since webpack 5.111.0, an output.module build that loads chunks through a native import() names each one with a literal specifier held by the chunk loader, so a bundler or a preload scanner can follow it without running webpack's runtime. Those names live in the chunk carrying the runtime, so changing a lazily loaded chunk invalidates that one rather than every module importing it — webpack 5.110 wrote the specifier at each import site instead, which put the imported chunk's [contenthash] into the importing module.
By default the value is inferred from output.filename: it is used as-is when it contains [name], [id], [chunkhash] or [contenthash]; otherwise [id]. is prepended to its basename (bundle.js becomes [id].bundle.js). When output.filename is a function, [id].js (or [id].mjs with output.module) is used.
Usage as a function:
If the output.filename is defined as a string containing placeholder such as [name], [id], [contenthash], or [chunkhash], the default value for output.chunkFilename will be derived from the output.filename. Otherwise, [id].js will be used as the default value.
false 'array-push' | 'commonjs' | 'module' | 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 the target and output.module setting. For more details, search for "chunkFormat" in the webpack defaults.
The Number of milliseconds before chunk request expires. This option is supported since webpack 2.6.0.
The name of the global array webpack uses to load chunks whenever output.chunkFormat is 'array-push', which is the default for the web and webworker targets. The default name is 'webpackChunk' followed by output.uniqueName, with every character that is not valid in a JavaScript identifier replaced by _. The array lives on output.globalObject, so in a browser build of a package named my-app it is self['webpackChunkmy_app'].
Every chunk file pushes its modules into that array, and the runtime contained in the initial chunk replaces the array's push method with its own callback. That way chunks that were loaded before the runtime and chunks that arrive after it are both installed, which is what makes asynchronous chunk loading work without a fixed loading order.
This option replaces webpack 4's output.jsonpFunction. Passing jsonpFunction to webpack 5 fails validation with a message pointing at output.chunkLoadingGlobal.
Two builds loaded by one document that share the same chunkLoadingGlobal push their chunks into each other's array, which typically surfaces as a runtime error such as Uncaught TypeError: __webpack_modules__[moduleId] is not a function.
webpack 5 prevents that by deriving the default from output.uniqueName, which in turn defaults to the name in your package.json. So you only need to set this option — or, better, output.uniqueName — when several builds on a page would otherwise end up with the same unique name: a host application and a remote built from the same package name, or a library built twice with the same configuration.
Prefer setting output.uniqueName: it disambiguates output.hotUpdateGlobal and output.devtoolNamespace along with the chunk loading global, whereas chunkLoadingGlobal only changes the latter.
false 'jsonp' | 'import-scripts' | 'require' | 'async-node' | 'import' | string
The method to load chunks (methods included by default are 'jsonp' (web), 'import' (ESM), 'import-scripts' (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 the target and chunkFormat setting. For more details, search for "chunkLoading" in the webpack defaults.
boolean { dry?: boolean, keep?: RegExp | string | ((filename: string) => boolean) }
You can also use it with hook:
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.
string (string | object)[]
Copy files and directories into output.path as part of the build. A copied file becomes an asset like any other, so output.clean keeps it, stats reports it, and in