webpack使用compression-webpack-plugin做gzip压缩报tapPromise错误如何解决

问题根因 #

你遇到的TypeError: Cannot read property 'tapPromise' of undefined错误是compression-webpack-plugin和webpack版本不兼容导致的：

• 最新版（v10及以上）的compression-webpack-plugin仅适配webpack 5.x版本，它调用的compilation.hooks.processAssets是webpack5才新增的钩子，webpack4环境下不存在这个属性就会抛出该报错。

解决方案 #

方案一：webpack版本为4.x时，降级插件到适配版本

执行以下命令卸载当前高版本插件，安装适配webpack4的兼容版本：

npm uninstall compression-webpack-plugin
npm install compression-webpack-plugin@6.1.1 --save-dev

降级完成后你现有的配置无需修改，直接执行npm run build即可正常生成.gz压缩文件。

小提示：如果仅需要压缩JS文件，可将配置中的test属性修改为test: /\.js$/，过滤其他类型资源，提升构建效率。

方案二：升级webpack到5.x版本

如果可以升级webpack版本，将webpack及相关生态依赖（webpack-cli、其他loader和插件）升级到适配webpack5的版本，即可保留使用最新版compression-webpack-plugin。

验证与部署注意事项 #

• 构建完成后检查dist目录，对应资源旁存在同名.gz后缀文件即为压缩成功
• 部署时需要配置静态资源服务器开启gzip_static功能（以Nginx为例，配置里添加gzip_static on;即可），服务器会优先返回预压缩的.gz文件，无需实时压缩消耗性能，如果不开启该配置，生成的.gz文件不会被实际使用。

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