Webpack 5生产环境打包如何保留指定JS文件内的注释不被提取删除

配置步骤 #

1. 直接在webpack.config.js顶部引入TerserPlugin即可，Webpack 5生产环境默认内置该插件，无需额外安装：

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

2. 修改webpack.config.js的optimization配置，自定义Terser压缩规则，你原有babel-loader配置无需改动：

module.exports = {
  // 其他原有配置保持不变...
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: (astNode, comment) => {
          // 匹配需要留在JS内的注释，符合该规则的注释不提取到LICENSE文件
          if (comment.value.includes('Keep this comment in production')) {
            return false;
          }
          // 其他符合规则的注释正常提取到LICENSE文件，不影响原有打包逻辑
          return /@preserve|@license|@cc_on/i.test(comment.value);
        },
        terserOptions: {
          format: {
            comments: (astNode, comment) => {
              // 匹配需要保留的注释，直接留存在JS产物内
              if (comment.value.includes('Keep this comment in production')) {
                return true;
              }
              // 其他注释默认删除，可根据自身需求调整规则
              return false;
            }
          }
        }
      })
    ]
  }
}

3. 如果你的custom.js仅包含注释会被Tree Shaking移除，可在package.json中标记该文件为有副作用，无需修改其他配置：

{
  "sideEffects": ["./src/对应路径/custom.js"]
}

效果验证 #

重新执行生产环境打包后：

• 其他JS文件的注释提取逻辑保持不变，仍会生成对应的LICENSE.txt
• custom.js中指定的注释会直接保留在编译后的JS文件内，不会被提取到单独的LICENSE文件
• 即使custom.js仅包含该条注释，也不会被打包为空文件

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