问题背景

最近将项目中的Webpack3升级到了Webpack5，打包之后发现输出文件中多了一些LICENSE文件，如下图所示：

看着就感觉怪怪的，和升级之前的输出文件不一样，总感觉是那处了问题，于是查阅资料...

问题分析

多输出了一些文件，那这可能是打包的输出配置出了岔子或者是用的插件中配置不太对。

于是检查自己的配置...

没发现什么问题呀...没看到有啥配置会让我打包输出这些文件的...

于是再仔细看看官方文档吧。

果然在这里发现了蛛丝马迹：

Webpack 5 默认压缩代码工具为terser-webpack-plugin，无需安装，默认使用。

于是再从terser-webpack-plugin入手，查看其配置，找到了 extractComments ：

extractComments默认为true，所以会将注释提取到单独的文件中，生成本文头发所见的LICENSE文件。

解决方案

问题原因已经找到了，开始着手解决吧。

修改terser-webpack-plugin配置：

由于Webpack5已经集成terser-webpack-plugin，无需单独安装，直接引入

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

然后加入如下配置：

optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin({
            extractComments: false,//不将注释提取到单独的文件中
          }),
        ],
      }

最终配置如图所示：

最后我们在打包试试：

nice! 可以看到，我们的输出文件中不再出现LICENSE文件，问题解决。

总结

官方文档还是得仔细阅读，不然出了问题还不知道问题在哪，还得花时间一步步排查。