webpack HtmlWebpackPlugin报错 TypeError: The ‘compilation‘ argument must be an ins

707 阅读1分钟

一、翻车现场

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]/[_webpack@5.6.0@webpack]/lib/javascript/JavascriptModulesPlugin.js:119:10

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

  • Hook.js:14 Hook.CALL_DELEGATE [as _call]
    [npm]/[webpack]/[_tapable@2.1.1@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]/[_tapable@2.1.1@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 html-webpack-plugin@5.0.0-alpha.9

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

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