一、翻车现场
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:10CommonJsChunkFormatPlugin.js:30
[webpack-demo]/[_webpack@5.6.0@webpack]/lib/javascript/CommonJsChunkFormatPlugin.js:30:19Hook.js:14 Hook.CALL_DELEGATE [as _call]
[npm]/[webpack]/[_tapable@2.1.1@tapable]/lib/Hook.js:14:14Compiler.js:942 Compiler.newCompilation
[npm]/[webpack]/lib/Compiler.js:942:30Compiler.js:984
[npm]/[webpack]/lib/Compiler.js:984:29Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[npm]/[webpack]/[_tapable@2.1.1@tapable]/lib/Hook.js:18:14Compiler.js:979 Compiler.compile
[npm]/[webpack]/lib/Compiler.js:979:28Compiler.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命令打包试一下。
如果对你有帮助,请给我一个👍以示鼓励😘