Webpack BannerPlugin 创建单独的许可文件

Question

当我使用 Webpack BannerPlugin 时，它会在输出文件的顶部添加一条注释，但注释只是说要检查另一个文件。

有没有办法使用 BannerPlugin 或其他 webpack 工具将版本号插入输出文件本身？

当前输出文件:

/*! For license information please see main.js.LICENSE.txt */
(()=>{console.log("myjs");})();

需要:

/*! Current main.js Version: 1.0.0 */
(()=>{console.log("myjs");})();

我的 webpack 配置:

let config = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

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 + " */",
    })
  ],
};

module.exports = [mainConfig];

Answer 1

我能够按照以下答案解决此问题:https://stackoverflow.com/a/65650316/4871331

总结:Webpack v5 及更高版本自动附带了 TerserWebpackPlugin，它优化了代码。默认情况下，它将评论提取到一个单独的文件中(包括横幅评论)。

要解决这个问题，您需要自定义 terser 以不提取评论。

首先，安装插件:

npm install --save-dev terser-webpack-plugin

然后在webpack.config.js中添加配置:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {

  //...

  optimization: {
    minimizer: [new TerserPlugin({
      extractComments: false,
    })],
  },

  //...

};