Output

Control how webpack writes compiled files to disk

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

Chunk Loading

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'

Hashing

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'

Module Output

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
}

Library Output

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'
}

Cross-Origin Loading

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'
}

Source Maps

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'

Hot Module Replacement

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'

CSS Output

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'

Other Options

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'
  }
};