问题背景
最近将项目中的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文件,问题解决。
总结
官方文档还是得仔细阅读,不然出了问题还不知道问题在哪,还得花时间一步步排查。