html-webpack-plugin@5.3.1执行构建时出现Cannot read property 'tap' of undefined报错

报错原因 #

你遇到的Cannot read property 'tap' of undefined报错核心是依赖版本不兼容：html-webpack-plugin@5.x 仅支持 webpack@5.x 运行环境，你当前项目安装的webpack版本为4.44.2，低版本webpack没有暴露高版本插件需要的compiler hook实例，导致插件初始化调用tap方法时报错。

解决方案 #

有两种可选方案，优先推荐改动更小的第一种：

方案1：降级html-webpack-plugin到适配webpack4的版本 #

执行以下命令更换插件版本即可：

• 卸载当前高版本插件
  npm uninstall html-webpack-plugin
• 安装适配webpack4的4.x最新版
  npm install html-webpack-plugin@4.5.2
  修改完成后重新执行启动或构建命令即可正常运行。

方案2：升级webpack到5.x适配高版本插件 #

如果你希望使用新版本插件的功能，可以升级webpack及周边配套依赖，需要做以下改动：

• 升级webpack及相关依赖
  npm install webpack@5 webpack-cli@4 webpack-dev-server@4
• 修改webpack.config.js中devServer的配置项，把contentBase替换为webpack5要求的static属性：

devServer: {
  port: 8080,
  static: path.resolve(__dirname, 'dist'),
  hot: true
}

修改完成后重新执行命令即可。

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