Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.webpack.js.org/llms.txt

Use this file to discover all available pages before exploring further.

The output configuration tells webpack how and where to write the compiled files to disk.

​
Basic Configuration

webpack.config.js
const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

​
Output Options

​
output.path
string
The output directory as an absolute path (required).
path: path.resolve(__dirname, 'dist')
Default: path.resolve(process.cwd(), 'dist')
Must be an absolute path. Use path.resolve() or path.join() with __dirname.
​
output.filename
string | function
Name of each output bundle.
filename: '[name].[contenthash].js'
Default: '[name].js'See Filename Templates for available substitutions.
​
output.publicPath
string | 'auto' | function
Public URL of the output directory when referenced in a browser.
publicPath: 'https://cdn.example.com/assets/'
// or
publicPath: '/assets/'
// or
publicPath: 'auto' // automatically determine
Default: 'auto'
​
output.chunkFilename
string | function
Name of non-entry chunk files.
chunkFilename: '[id].[contenthash].js'
Default: '[id].js' or derived from output.filename
​
output.assetModuleFilename
string | function
Filename template for asset modules.
assetModuleFilename: 'assets/[hash][ext][query]'
Default: '[hash][ext][query]'
​
output.clean
boolean | object
Clean the output directory before emit.
clean: true
// or with options
clean: {
  dry: false, // Log assets to be removed instead of deleting
  keep: /\.git/ // Keep specific assets
}
Default: false

​
Filename Templates

Templates can use these substitutions:
  • [name] - Module name
  • [id] - Module identifier
  • [hash] - Module hash
  • [contenthash] - Hash of the content
  • [chunkhash] - Hash of the chunk content
  • [fullhash] - Full hash of the compilation
  • [ext] - File extension (includes .)
  • [query] - Query string (includes ?)
  • [base] - Base filename
  • [path] - File path
  • [file] - Filename with extension
You can combine them: 
filename: '[name].[contenthash:8].js'
chunkFilename: 'chunks/[name].[chunkhash:8].js'
assetModuleFilename: 'assets/[name].[hash:8][ext]'

​
Advanced Options

​
output.chunkLoading
string | false
Method of loading chunks.
chunkLoading: 'jsonp' // web
chunkLoading: 'import' // ESM
chunkLoading: 'require' // Node.js
chunkLoading: 'async-node' // async Node.js
chunkLoading: false // disable
Default: Determined by target
​
output.chunkLoadTimeout
number
Timeout for chunk requests in milliseconds.
chunkLoadTimeout: 120000 // 2 minutes
Default: 120000
​
output.chunkLoadingGlobal
string
Global variable used for loading chunks.
chunkLoadingGlobal: 'webpackJsonp'
​
output.hashFunction
string | function
Hashing algorithm to use.
hashFunction: 'md4' // or 'sha256', custom function
Default: 'md4'
​
output.hashDigest
string
Encoding to use for generating the hash.
hashDigest: 'hex' // or 'base64', 'base26'
Default: 'hex'
​
output.hashDigestLength
number
Length of the hash digest to use.
hashDigestLength: 20
Default: 20
​
output.hashSalt
string
Salt to update the hash.
hashSalt: 'my-unique-salt'
​
output.module
boolean
Output JavaScript files as ES module.
module: true
Default: false
Requires experiments.outputModule to be enabled.
​
output.iife
boolean
Wrap output in an IIFE to avoid global scope pollution.
iife: true
Default: true
​
output.environment
object
Define the capabilities of the target environment.
environment: {
  arrowFunction: true,
  const: true,
  destructuring: true,
  forOf: true,
  dynamicImport: true,
  module: true
}
​
output.library
string | object
Expose the output as a library.
// String (simple)
library: 'MyLibrary'

// Object (advanced)
library: {
  name: 'MyLibrary',
  type: 'umd',
  export: 'default',
  umdNamedDefine: true
}
​
output.library.type
string
Type of library.Options: 'var', 'module', 'assign', 'this', 'window', 'self', 'global', 'commonjs', 'commonjs2', 'amd', 'umd', 'jsonp', 'system'
library: {
  type: 'umd'
}
​
output.library.name
string | object
Name of the library.
library: {
  name: 'MyLibrary'
}
​
output.library.export
string | string[]
Specify which export to expose.
library: {
  export: 'default'
}
​
output.crossOriginLoading
false | 'anonymous' | 'use-credentials'
Enable cross-origin loading of chunks.
crossOriginLoading: 'anonymous'
Default: false
​
output.trustedTypes
boolean | string | object
Use Trusted Types policy to create URLs.
trustedTypes: true
// or
trustedTypes: 'my-policy-name'
// or
trustedTypes: {
  policyName: 'my-webpack-app',
  onPolicyCreationFailure: 'continue'
}
​
output.sourceMapFilename
string
Filename template for source map files.
sourceMapFilename: '[file].map[query]'
Default: '[file].map[query]'
​
output.devtoolModuleFilenameTemplate
string | function
Template for module filenames in source maps.
devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]?[loaders]'
​
output.devtoolNamespace
string
Module namespace for source maps.
devtoolNamespace: 'my-library'
​
output.hotUpdateChunkFilename
string
Filename for hot update chunks.
hotUpdateChunkFilename: '[id].[fullhash].hot-update.js'
Default: '[id].[fullhash].hot-update.js'
​
output.hotUpdateMainFilename
string
Filename for hot update main file.
hotUpdateMainFilename: '[runtime].[fullhash].hot-update.json'
Default: '[runtime].[fullhash].hot-update.json'
​
output.hotUpdateGlobal
string
Global variable for hot updates.
hotUpdateGlobal: 'webpackHotUpdate'
​
output.cssFilename
string | function
Filename template for CSS files.
cssFilename: '[name].[contenthash].css'
​
output.cssChunkFilename
string | function
Filename template for non-entry CSS chunks.
cssChunkFilename: '[id].[contenthash].css'
​
output.globalObject
string
Expression for the global object.
globalObject: 'this' // or 'self', 'window', 'global'
Default: 'self' (web), 'global' (Node.js)
​
output.uniqueName
string
Unique name to avoid conflicts between multiple webpack runtimes.
uniqueName: 'my-app'
​
output.compareBeforeEmit
boolean
Check if files changed before writing to filesystem.
compareBeforeEmit: true
Default: true
​
output.pathinfo
boolean | 'verbose'
Include path info in bundles.
pathinfo: true // or 'verbose'
Default: true in development, false in production

​
Common Patterns

​
Production Build with Cache Busting

webpack.config.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[hash:8][ext][query]',
    clean: true
  }
};

​
Development with Source Maps

webpack.config.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    pathinfo: true,
    sourceMapFilename: '[file].map'
  }
};

​
CDN Deployment

webpack.config.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    publicPath: 'https://cdn.example.com/assets/',
    crossOriginLoading: 'anonymous'
  }
};

​
Library Output

webpack.config.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-library.js',
    library: {
      name: 'MyLibrary',
      type: 'umd',
      export: 'default'
    },
    globalObject: 'this'
  }
};