在 Webpack 5 生产 javascript 输出中保留一些注释

Question

我想我要疯了，因为每个搜索引擎只向我抛出有关如何从输出文件中删除注释的结果，这与我搜索的内容完全相反😤

我使用 Webpack 5 中的所有默认值，其中内置了 Terser，所以我的 webpack.config.js 中没有关于此的内容。我的

js

规则如下所示：

      {
        test: /\.js/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
      },

我的 main.js 文件已按预期缩小（所需注释提取到 main.js.LICENSE.txt），但我也有一个简单的 custom.js 文件，该文件仅包含注释，并且应保留在产量：

/*!
 * Keep this comment in production
 */

几年前

/*!

或

//!

做到了这一点，但现在似乎没有任何效果，甚至在评论中添加

@license

或

@preserve

，如 文档建议

如果只有注释，则生产文件为空。 如果我添加 console.log() 来包含所需的代码位，那么它确实会留下注释，但仅在另一个文件 custom.js.LICENSE.txt 中。 我需要什么配置才能保持这个文件 custom.js 不受影响，只在其中包含此注释？我想我可以使用文件加载器来代替这个，但我希望像任何其他 .js 一样编译它，以防我需要在那里添加一些代码。只是为了始终保留此一条评论，而不将其提取到另一个文件。

Answer 1

这个问题提出已经有一段时间了，但对于那些仍在解决这个问题的人来说，这是答案。

// webpack.config.file
optimization: {
   minimizer: [new TerserJSPlugin({
            terserOptions: {
                format: {
                    comments: /HELLO/,
                },
            },
        })
}

so terser 保留与

/HELLO/

正则表达式匹配的注释，例如

COMMENT_HELLO

还有这里提到的一个简单方法stackoverflow.com/a/34299912/9477042

Answer 2

可能的解决方案之一是使用 TerserWebpackPlugin 插件并带来 使用此配置返回

/*!

和

//!

：

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: /^!/i,
          },
        },
     }),
    ],
  },
};