Skip to main content
The BannerPlugin adds a banner to the top of each generated chunk. This is useful for adding copyright notices, licensing information, or build metadata.

​
Usage

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.BannerPlugin('Copyright © 2024')
  ]
};

​
Configuration

​
banner
string | function
required
The banner text or a function that returns the banner text. Function receives {hash, chunk, filename} as argument.
​
raw
boolean
default:"false"
If true, banner will not be wrapped in a comment
​
entryOnly
boolean
default:"false"
If true, banner will only be added to entry chunks
​
test
RegExp | RegExp[]
Include chunks that match the test
​
include
RegExp | RegExp[]
Include chunks matching this pattern
​
exclude
RegExp | RegExp[]
Exclude chunks matching this pattern
​
footer
boolean
default:"false"
If true, banner will be placed at the bottom instead of top
​
stage
number
The stage of asset processing to add the banner

​
Examples

new webpack.BannerPlugin('Copyright © 2024 My Company')
Generates: 
/*! Copyright © 2024 My Company */

​
Multiline Banner

new webpack.BannerPlugin({
  banner: `
Project: My Application
Version: 1.0.0
Copyright © 2024
License: MIT
  `.trim()
})
Generates: 
/*!
 * Project: My Application
 * Version: 1.0.0
 * Copyright © 2024
 * License: MIT
 */

​
Dynamic Banner with Build Info

const webpack = require('webpack');

new webpack.BannerPlugin({
  banner: (data) => {
    return [
      'Project: My App',
      `Build: ${new Date().toISOString()}`,
      `Chunk: ${data.chunk.name || data.chunk.id}`,
      `Hash: ${data.hash}`
    ].join('\n');
  }
})

​
Entry Chunks Only

new webpack.BannerPlugin({
  banner: 'Copyright © 2024',
  entryOnly: true
})

​
JavaScript Files Only

new webpack.BannerPlugin({
  banner: 'Copyright © 2024',
  test: /\.js$/
})

​
Raw Banner (No Comment Wrapper)

new webpack.BannerPlugin({
  banner: '#!/usr/bin/env node',
  raw: true,
  entryOnly: true
})
Generates: 
#!/usr/bin/env node

new webpack.BannerPlugin({
  banner: 'End of bundle',
  footer: true
})

​
With Version from package.json

const pkg = require('./package.json');

new webpack.BannerPlugin({
  banner: `${pkg.name} v${pkg.version}\nCopyright © ${new Date().getFullYear()}`
})

​
Exclude Specific Files

new webpack.BannerPlugin({
  banner: 'Copyright © 2024',
  exclude: /vendor/
})

​
Multiple File Types

new webpack.BannerPlugin({
  banner: 'Copyright © 2024',
  test: [/\.js$/, /\.css$/]
})

​
Use Cases

​
License Information

const fs = require('fs');

new webpack.BannerPlugin({
  banner: fs.readFileSync('./LICENSE', 'utf8')
})

​
Build Metadata

new webpack.BannerPlugin({
  banner: () => {
    const buildDate = new Date().toISOString();
    const gitHash = require('child_process')
      .execSync('git rev-parse --short HEAD')
      .toString()
      .trim();
    
    return [
      `Build Date: ${buildDate}`,
      `Git Commit: ${gitHash}`
    ].join('\n');
  }
})

​
Shebang for CLI Tools

new webpack.BannerPlugin({
  banner: '#!/usr/bin/env node\n\n"use strict";',
  raw: true,
  entryOnly: true,
  include: /cli\.js$/
})

​
Best Practices

  • Keep banners concise for better readability
  • Use entryOnly: true to avoid duplicate banners in code-split chunks
  • Use raw: true only when necessary (e.g., shebangs)
  • Consider file size impact in production builds
Banners are added to all matching chunks by default. Use test, include, or exclude to limit which files receive the banner.