使用html-webpack-plugin 插件报错问题解决方案

使用webpack在构建HTML时需要安装并且使用html-webpack-plugin 插件但是在构建过程中会报错

报错信息如下：
TypeError: Cannot read property ‘tap’ of undefined
at HtmlWebpackPlugin.apply (D:\XXX\node_modules\html-webpack-plugin\index.js:40:31)
at webpack (D:\XXX\node_modules\webpack\lib\webpack.js:51:13)
at processOptions (D:\XXX\node_modules\webpack-cli\bin\cli.js:272:16)
at D:\XXX\node_modules\webpack-cli\bin\cli.js:364:3
at Object.parse (D:\XXX\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
at D:\XXX\node_modules\webpack-cli\bin\cli.js:49:8
at Object. (D:\XXX\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (D:\XXX\node_modules\webpack\bin\webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.

原因解释

使用yarn add html-webpack-plugin --dev安装插件时，默认安装的是最新版本的html-webpack-plugin 插件，最新版本中使用tap()函数导致无法识别。

解决方案

安装插件时使用yarn html-webpack-plugin@4.0.0-alpha --dev命令安装低一版本的插件即可解决，注意：在安装低版本之前如果安装过最新版插件需要使用yarn remove html-webpack-plugin --dev命令删除原有插件