webpack报错：ERROR in TypeError: The ‘compilation‘ argument must be an instance of Compilation

一、JavascriptModulesPlugin.js:119 getCompilationHooks

[fore-end]/[webpack]/lib/javascript/JavascriptModulesPlugin.js:119:10

• CommonJsChunkFormatPlugin.js:30
  [fore-end]/[webpack]/lib/javascript/CommonJsChunkFormatPlugin.js:30:19

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

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

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

  [npm]/[webpack]/[tapable]/lib/Hook.js:18:14

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

• Compiler.js:495 Compiler.runAsChild
  [npm]/[webpack]/lib/Compiler.js:495:8

webpack 5.11.0 compiled with 1 error in 134 ms

二、报错原因

webpack5和html-webpack-plugin4二者之间的版本兼容问题。

三、解决方案(我用的是第二种)

第一种是将webpack的版本降到4点几的版本

首先卸载之前安装的webpack

npm uninstall webpack -g

之后再安装指定的webpack版本

npm install webpack@4.44.2 -g

在安装html-webpack-plugin

npm i --save-dev html-webpack-plugin

在webpack.config.js中设置：

const {resolve} = require('path')
const HtmlWebpackPlugin = require(require.resolve('html-webpack-plugin', { paths: [process.cwd()] }));

然后运行webpack指令

第二种是改变html-webpack-plugin的版本

首先卸载html-webpack-plugin

npm uninstall html-webpack-plugin

然后安装指定版本的html-webpack-plugin

npm i html-webpack-plugin@5.0.0-alpha.9

然后运行webpack指令