安装 compression webpack plugin 报错：Cannot read property ‘tapPromise‘ of undefined

安装 compression webpack plugin 报错：Cannot read property ‘tapPromise’ of undefined

@vue/cli-service: 4.5.0
webpack: 4

默认安装 compression-webpack-plugin 插件，会自动安装最新版, 而最新版本不兼容问题，在运行项目时导致报错：Cannot read property ‘tapPromise’ of undefined；

报错

ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined
    at D:\my-project\node_modules\compression-webpack-plugin\dist\index.js:414:39
    at SyncHook.eval [as call] (eval at create (D:\my-project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (D:\my-project\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.newCompilation (D:\my-project\node_modules\webpack\lib\Compiler.js:630:30)
    at D:\my-project\node_modules\webpack\lib\Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\my-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\my-project\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (D:\my-project\node_modules\webpack\lib\Compiler.js:662:28)
    at D:\my-project\node_modules\webpack\lib\Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\my-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (D:\my-project\node_modules\tapable\lib\Hook.js:154:20)
    at Watching._go (D:\my-project\node_modules\webpack\lib\Watching.js:41:32)
    at D:\my-project\node_modules\webpack\lib\Watching.js:33:9
    at Compiler.readRecords (D:\my-project\node_modules\webpack\lib\Compiler.js:529:11)
    at new Watching (D:\my-project\node_modules\webpack\lib\Watching.js:30:17)
    at Compiler.watch (D:\my-project\node_modules\webpack\lib\Compiler.js:244:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ums_web@0.1.0 serve:test: `vue-cli-service serve --mode test`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ums_web@0.1.0 serve:test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\node\node-global\npm-cache\_logs\2022-04-01T06_33_28_173Z-debug.log

解决

使用降级版本 v6.1.1, 解决了这个问题

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

遇到了新问题

warning
Conflict: Multiple assets emit different content to the same filename js/.gz

这个问题是降级到 v6.1.1 这个版本后， npm run build 时候，发出警告信息，
理论上来说警告是可以忽略的，但是这一出出一片实在心里难受，所以再来解决下这个问题；
其实不解决，生成无效的gzip文件，还是要解决的。
这个警告的意思是，不同的文件都生成的文件是js/.gz, 其实就是在 path 目录（js/）下生成的文件都是.gz文件；

解决

官方给的filename配置是： filename: '[path].gz[query]' 生成的是同名文件.gz， 然后 改成 filename: '[path][base].gz'；