Webpack5打包-禁止生成LICENSE文件

超、凢脫俗 2022-10-23 11:17 407阅读 0赞

# 问题背景 #

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

![6e69a2f18dcc6a97cc6d75d1c9adb1cc.png][]

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

# 问题分析 #

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

于是检查自己的配置…

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

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

果然在这里发现了蛛丝马迹：  
![030421ddd781b1422d3c4e301266dbc1.png][]

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

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

![673f7037715187f31c1e15c6079784f2.png][]

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

# 解决方案 #

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

修改terser-webpack-plugin配置：

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

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

然后加入如下配置：

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

最终配置如图所示：

![5091b2be14c9b0b42ad0869d00c58bf0.png][]

最后我们在打包试试：

![eb67a4820b609b05776e201ff3e24d53.png][]

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

# 总结 #

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

[6e69a2f18dcc6a97cc6d75d1c9adb1cc.png]: /images/20221023/597f019455e94b378214e2905341f5e0.png
[030421ddd781b1422d3c4e301266dbc1.png]: /images/20221023/7cf8d72da79d41a9bc2ebda589ba21c2.png
[673f7037715187f31c1e15c6079784f2.png]: /images/20221023/210c59b14fd8411caa3991bdd2051e36.png
[5091b2be14c9b0b42ad0869d00c58bf0.png]: /images/20221023/ca4700bb215b47cc9e5a03825409dfb9.png
[eb67a4820b609b05776e201ff3e24d53.png]: /images/20221023/ebe120adf5ad4b93b13d0ce3b8d0ca26.png