Webpack BannerPlugin生成独立许可证文件 如何在输出文件直接插入版本号

解决方案 #

你遇到的问题是webpack默认开启了注释提取功能，会把/*!开头的特殊注释统一抽离到独立的LICENSE.txt文件中，同时你的BannerPlugin配置存在语法冗余，修正方式如下：

1. 完整修正配置

const path = require('path');
const webpack = require('webpack');
// 引入项目根目录package.json，直接读取version字段
const PACKAGE = require('./package.json');
// webpack5内置TerserPlugin，无需额外安装
const TerserPlugin = require('terser-webpack-plugin');

let config = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  // 生产环境压缩配置，避免自定义注释被删除
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          format: {
            // 保留!开头的版权类注释
            comments: /^!/
          }
        }
      })
    ]
  }
};

let mainConfig = {
  ...config,
  entry: {
    main: "./src/index.ts",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `Current main.js Version: ${PACKAGE.version}`,
      // 关闭注释提取，直接将注释留在输出JS文件中
      extract: false,
      // 仅在入口文件插入注释，不需要可删除该参数
      entryOnly: true
    })
  ],
};

module.exports = [mainConfig];

2. 核心修改说明

• 需确保项目根目录的package.json中存在version字段，值设为你需要的版本号即可
• extract: false：关闭webpack默认的注释提取逻辑，不会再生成独立的LICENSE.txt文件，版本注释会直接插入到输出JS顶部
• 移除了原banner末尾多余的*/：BannerPlugin默认会自动给内容包裹/*! */格式的块级注释，无需手动补全注释标签
• 生产环境下新增TerserPlugin配置：避免压缩工具自动删除自定义的版本注释，同时关闭压缩工具的注释提取逻辑

内容的提问来源于stack exchange，提问作者fortix