webpack HtmlWebpackPlugin报错 TypeError: The ‘compilation‘ argument must be an instance of Compilation

一、翻车现场

TypeError: The ‘compilation’ argument must be an instance of Compilation

ERROR in TypeError: The ‘compilation’ argument must be an instance of Compilation

• JavascriptModulesPlugin.js:119 getCompilationHooks
  [webpack-demo]/[[email protected]@webpack]/lib/javascript/JavascriptModulesPlugin.js:119:10

• CommonJsChunkFormatPlugin.js:30
  [webpack-demo]/[[email protected]@webpack]/lib/javascript/CommonJsChunkFormatPlugin.js:30:19

• Hook.js:14 Hook.CALL_DELEGATE [as _call]
  [npm]/[webpack]/[[email protected]@tapable]/lib/Hook.js:14:14

• Compiler.js:942 Compiler.newCompilation
  [npm]/[webpack]/lib/Compiler.js:942:30

• Compiler.js:984
  [npm]/[webpack]/lib/Compiler.js:984:29

• Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [npm]/[webpack]/[[email protected]@tapable]/lib/Hook.js:18:14

• Compiler.js:979 Compiler.compile
  [npm]/[webpack]/lib/Compiler.js:979:28

• Compiler.js:494 Compiler.runAsChild
  [npm]/[webpack]/lib/Compiler.js:494:8
  webpack 5.6.0 compiled with 1 error in 1055 ms

二、原因分析

是webpack5和html-webpack-plugin4的版本兼容问题，我使用cnpm install -D html-webpack-plugin 安装的版本是4.5.0。

三、解决方案

解决方案有两个：一个是将webpack降低为4点几的版本，那么另一个解决方案是改边html-webpack-plugin的版本。
这里我选择的是改变html-webpack-plugin的版本。步骤如下：
1.卸载已安装的html-webpack-plugin的依赖

cnpm uninstall html-webpack-plugin

如果通过上面的命令无法卸载的话，就手动去package.json文件中删除（如下图），然后删除node_modules，再通过cnpm install命令 重新安装依赖。

2.安装指定版本的html-webpack-plugin

cnpm install [email protected]

到这里就已经解决了，可以运行webpack命令打包试一下。

如果对你有帮助，请给我一个以示鼓励