html-webpack-plugin 自动生成预览页面 ，报错（“ type”），你要的解决方法

目录

html-webpack-plugin相关问题

一.安装了5.x的版本，执行npm run dev时报错：

 

二.原因：html-webpack-plugin版本问题

三.解决步骤：

1.先卸载之前的版本

2.再安装没有问题的版本：

于是，package.json显示如下内容：

最后，成功运行：

 

四.最后的最后，我们打开上面的网址：http://localhost:8080/

自动生成预览页面如下：

 

五.总结：安装插件时记得注意版本问题，加油。

---

html-webpack-plugin相关问题

一.安装了5.x的版本，执行npm run dev时报错：

PS C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY> npm run dev

> WEBPACK_STUDY@1.0.0 dev C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY
> webpack-dev-server

TypeError: Cannot read property 'tap' of undefined
    at HtmlWebpackPlugin.apply (C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY\node_modules\html-webpack-plugin\index.js:40:31)
    at webpack (C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY\node_modules\webpack\lib\webpack.js:51:13)
......
......

 

二.原因：html-webpack-plugin版本问题

 

三.解决步骤：

1.先卸载之前的版本

npm uninstall html-webpack-plugin

2.再安装没有问题的版本：

npm i html-webpack-plugin@3.2.0

于是，package.json显示如下内容：

"dependencies": {
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.2"
  }

最后，成功运行：

PS C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY> npm run dev

> 1.WEBPACK_STUDY@1.0.0 dev C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from C:\Users\34779\Desktop\前端\练习\Vue\webpack\WEBPACK_STUDY    
i ｢wdm｣: Hash: 92c2340fa4e7cf0fdcca
Version: webpack 4.43.0
Time: 2618ms
...
...
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Compiled successfully.

 

四.最后的最后，我们打开上面的网址：http://localhost:8080/

自动生成预览页面如下：

 

五.总结：安装插件时记得注意版本问题，加油。

 

---