Webpack 5控制台重复打印两次日志是什么原因？如何解决？

Webpack 5 控制台输出两次重复日志通常是以下几个常见原因导致的：

• 开发模式下开启了热更新（HMR）：使用webpack-dev-server启动开发服务时，默认开启的HMR会在首次构建完成后触发一次额外的初始化日志输出，看起来就是两次重复的构建日志。
• 多入口配置：如果你的webpack配置文件中entry字段配置了多个入口，每个入口独立完成构建后都会输出一次完整日志，导致重复。
• 存在多个构建实例：使用webpack-merge合并配置时不小心生成了独立的双构建任务，或者自定义启动脚本中重复调用了webpack编译方法，都会触发多次日志输出。
• 日志配置问题：stats配置开启了verbose模式，或者同时安装了多个进度/日志类插件（比如重复引入progress-webpack-plugin），也会出现重复的日志条目。

你可以按下面的步骤排查：

1. 先注释掉额外的入口，保留单入口测试，确认是不是多入口导致的问题
2. 临时关闭HMR验证，在devServer配置中添加hot: false，重启服务后如果日志不再重复，就是HMR的正常表现，不需要额外处理
3. 检查启动脚本和webpack配置，确认没有重复调用编译逻辑、没有重复引入日志类插件
4. 把stats配置改成默认值stats: 'normal'，看重复日志有没有消失

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