Skip to main content

​
Output Configuration

The output configuration tells webpack how to write the compiled files to disk. While you can have multiple entry points, only one output configuration is specified.

​
Basic Usage

At a minimum, webpack requires you to specify the output filename: 
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
This configuration outputs a single bundle.js file into the dist directory.

​
Output Path

The output.path property specifies the output directory as an absolute path: 
const path = require('path');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist/assets')
  }
};
The path must be an absolute path. Use path.resolve() or path.join() with __dirname to ensure cross-platform compatibility.

​
Filename Patterns

Webpack provides several substitutions for dynamic filenames:

​
Template Strings

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[id].[contenthash].chunk.js'
  }
};

​
Available Substitutions

TemplateDescription
[name]Entry point name
[id]Chunk id
[contenthash]Hash of the content (recommended for caching)
[chunkhash]Hash of the chunk content
[fullhash]Hash of the full compilation
[hash]Deprecated alias for [fullhash]

​
Hash Length

Control hash length with a colon: 
module.exports = {
  output: {
    filename: '[name].[contenthash:8].js'
  }
};

​
Multiple Entry Points

For multiple entry points, use substitutions to create unique filenames: 
module.exports = {
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
This creates:
  • dist/app.bundle.js
  • dist/admin.bundle.js

​
Public Path

The publicPath specifies the public URL address of output files when referenced in a browser: 
module.exports = {
  output: {
    publicPath: '/assets/',
    filename: '[name].js'
  }
};

​
CDN Configuration

module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/assets/',
    filename: '[name].[contenthash].js'
  }
};

​
Automatic Public Path

module.exports = {
  output: {
    publicPath: 'auto'
  }
};
Setting publicPath: 'auto' automatically determines the public path from the document’s <script> tag or import.meta.url.

​
Advanced Options

​
Asset Modules

module.exports = {
  output: {
    assetModuleFilename: 'images/[hash][ext][query]'
  }
};

​
WebAssembly

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

​
Source Maps

module.exports = {
  output: {
    sourceMapFilename: '[file].map[query]'
  },
  devtool: 'source-map'
};

​
Library Output

For creating libraries, configure the library export: 
module.exports = {
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
      export: 'default'
    },
    globalObject: 'this'
  }
};

​
Library Types

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

​
Chunk Loading

Control how chunks are loaded: 
module.exports = {
  output: {
    chunkLoading: 'jsonp', // or 'import-scripts', 'require', 'async-node'
    chunkFormat: 'array-push' // or 'commonjs', 'module'
  }
};

​
Clean Output Directory

module.exports = {
  output: {
    clean: true // Clean the output directory before emit
  }
};
Or with options: 
module.exports = {
  output: {
    clean: {
      keep: /\.git/ // Keep .git folder
    }
  }
};

​
Compiler Output Path

Webpack’s Compiler manages the output path internally: 
// From Compiler.js
class Compiler {
  constructor(context, options = {}) {
    // ...
    this.outputPath = "";
    this.outputFileSystem = null;
    // ...
  }

  emitAssets(compilation, callback) {
    const outputPath = compilation.getPath(this.outputPath, {});
    // Emit files to outputFileSystem
  }
}

​
Hash Functions

module.exports = {
  output: {
    hashFunction: 'xxhash64', // or 'md4'
    hashDigest: 'hex',
    hashDigestLength: 20
  }
};
Changing hashFunction affects caching. Only change if you have specific security or performance requirements.

​
Best Practices

  1. Use content hashes - For long-term caching: [name].[contenthash].js
  2. Set publicPath correctly - Especially when deploying to CDN
  3. Clean on build - Enable clean: true to remove old files
  4. Unique chunk names - Use [id] or [name] to prevent conflicts
  5. Absolute paths - Always use absolute paths for output.path

​
Common Patterns

​
Production Build

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

​
Development Build

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/'
  }
};
  • Entry Points - Configure entry points
  • Mode - Set development or production mode
  • Targets - Configure output for different environments