webpack.BannerPlugin

webpack.BannerPlugin 是一个用于在生成的打包文件顶部添加自定义注释或横幅的插件。它通常用于添加版权信息、版本号、作者信息等。

基本配置

BannerPlugin 的配置对象可以是一个字符串或一个对象。以下是两种常见的配置方式：

1. 字符串配置

  const webpack = require('webpack');

  module.exports = {
    // 其他配置...
    plugins: [
      new webpack.BannerPlugin('版权所有 (c) 2025 xxx公司');
    ]
  };

2. 对象配置

  const webpack = require('webpack');

  module.exports = {
    // 其他配置...
    plugins: [
      new webpack.BannerPlugin({
        // banner: string | function 要添加的横幅内容。可以是一个字符串，也可以是一个函数。如果是函数，它将接收文件路径和文件内容作为参数，并返回一个字符串。
        banner: '版权所有 (c) 2025 xx公司',
        // entryOnly: boolean 如果设置为 true，则只在入口文件（entry points）中添加横幅。默认为 false。
        entryOnly: true,
        // raw: boolean 如果设置为 true，横幅内容将不会被包裹在注释中。默认为 false
        raw: false,
        // test：RegExp | string | Array<RegExp | string> 匹配文件的正则表达式、字符串或数组。只有匹配的文件才会添加横幅。
        test: /\.js$/,
        // include: RegExp | string | Array<RegExp | string> 包含的文件或目录。只有包含的文件才会添加横幅。
        include: /src/,
        // exclude: RegExp | string | Array<RegExp | string> 排除的文件或目录。排除的文件不会添加横幅。
        exclude: /node_modules/
      })
    ]
  };

使用函数生成横幅

const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.BannerPlugin({
      banner: (file) => {
        return `文件: ${file}\n版权所有 (c) 2025 xxx公司`;
      }
    })
  ]
};

仅在入口文件添加横幅

  const webpack = require('webpack');

  module.exports = {
    // 其他配置...
    plugins: [
      new webpack.BannerPlugin({
        banner: '版权所有 (c) 2023 我的公司',
        entryOnly: true
      })
    ]
  };

使用正则表达式匹配文件

  const webpack = require('webpack');

  module.exports = {
    // 其他配置...
    plugins: [
      new webpack.BannerPlugin({
        banner: '版权所有 (c) 2023 我的公司',
        test: /\.js$/,
        include: /src/,
        exclude: /node_modules/
      })
    ]
  };