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

冷不防 2022-12-29 02:26 319阅读 0赞

一、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

  1. npm uninstall webpack -g

之后再安装指定的webpack版本

  1. npm install webpack@4.44.2 -g

在安装html-webpack-plugin

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

在webpack.config.js中设置：

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

然后运行webpack指令

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

首先卸载html-webpack-plugin

  1. npm uninstall html-webpack-plugin

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

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

然后运行webpack指令

发表评论

表情：
评论列表 （有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读