使用html-webpack-plugin 插件报错问题解决方案

最新推荐文章于 2024-05-27 15:18:14 发布
最新推荐文章于 2024-05-27 15:18:14 发布
阅读量3.7k 收藏
点赞数
文章标签： yarn webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_vava2/article/details/115922258
版权
在使用webpack构建HTML时遇到html-webpack-plugin报错TypeError: Cannot read property 'tap' of undefined。错误源于最新版本插件中的tap函数未被识别。解决方案是降级到低一版本的html-webpack-plugin，先删除已安装的最新版，再通过命令安装指定版本的插件。
摘要由CSDN通过智能技术生成

使用webpack在构建HTML时需要安装并且使用html-webpack-plugin 插件但是在构建过程中会报错

报错信息如下：
TypeError: Cannot read property ‘tap’ of undefined
at HtmlWebpackPlugin.apply (D:\XXX\node_modules\html-webpack-plugin\index.js:40:31)
at webpack (D:\XXX\node_modules\webpack\lib\webpack.js:51:13)
at processOptions (D:\XXX\node_modules\webpack-cli\bin\cli.js:272:16)
at D:\XXX\node_modules\webpack-cli\bin\cli.js:364:3
at Object.parse (D:\XXX\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
at D:\XXX\node_modules\webpack-cli\bin\cli.js:49:8
at Object. (D:\XXX\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/c

最低0.47元/天 解锁文章
逐渐头冷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
安装html-webpack-plugin插件打包文件后报错 ERROR in Error: document is not defined
weixin_53317758的博客
09-28 682
html-webpack-plugin 配置插件 报错 document is not defined
解决vue-cli webpack打包开启Gzip 报错问题
10-16
本文针对Vue-cli结合Webpack在开启Gzip压缩时遇到的问题进行了详细分析，并提供了具体的解决方案。在遇到类似的打包错误时，首先需要确认是否是因为缺少必要的插件或配置错误，然后检查插件版本是否与当前使用的...
webpack中插件“html-webpack-plugin”报错问题
weixin_48567232的博客
08-10 1596
html-webpack-plugin插件遇到__webpack_base_uri__ 问题
npm build报错Cannot find module ‘html-webpack-plugin‘解决方法
最新发布
邓邓子的博客
05-27 1308
缺少 html-webpack-plugin 模块。
webpack 引入 html-webpack-plugin 报错
aiyouer0191的博客
06-26 956
配置webpack当中，出现一个问题： 引入html-webpack-plugin 插件报错。 这时需要本地（也就是当前项目下）安装一下webpack就可以解决问题了。 注意：现在是webpack4版本，需要安装webpack-cli npm install --save-dev webpack webpack-cli 转载于:https://www...
配置html-webpack-plugin，运行时报错
m0_54088431的博客
04-06 3291
下载html-webpack-plugin后配置，再运行报以下错误。BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. Make sure to select an appropriate stage from Co..
Webpack安装Html-webpack-plugin报错：
飞翔的小白
11-25 1517
我使用的webpack的版本是： 原因是不兼容的问题，只需要把html-webpack-plugin的版本改为 "^4.4.1" 就可以啦！
webpack3里使用uglifyjs压缩js时打包报错的解决
10-17
在使用Webpack进行JavaScript应用构建时，压缩代码是一个重要的步骤，可以显著减小生产环境下的文件体积，提升加载速度。在Webpack 3中，一个常用的...希望这个解决方案能够帮助到正在学习和使用Webpack的开发者们。
解决webpack -p压缩打包react报语法错误的方法
08-30
本文将深入探讨这个问题，并提供一个具体的解决方案。 首先，让我们了解Webpack的基本配置。以下是一个基本的Webpack配置示例： ```javascript var webpack = require('webpack'); var ExtractTextPlugin = ...
解决VUEX兼容IE上的报错问题
08-27
Promise是ES6引入的一个异步编程解决方案，用于处理回调地狱和提高代码可读性，但在IE11及以下版本并未被实现。 解决方法： 1. 安装`babel-polyfill` 为解决IE浏览器的兼容性问题，我们需要使用`babel-polyfill`来...
vuedemo04-创建webpack.rar
09-16
在Vue.js前端开发中，遇到错误是常见的挑战，尤其是在配置和使用Webpack这样的构建工具时。Webpack是一个强大的模块打包工具，...如果问题仍然存在，查看官方文档、社区论坛和Stack Overflow等资源通常能找到解决方案。
解决iview打包时UglifyJs报错的问题
10-18
在使用iview库进行前端开发的打包过程中，我们经常遇到由于Webpack配置不当导致UglifyJs插件报错的问题。UglifyJs是一个JavaScript代码压缩工具，它可以减小文件大小，提高加载速度，同时去除无效代码、注释等，但不...
webpack4的迁移的使用方法
08-27
遇到插件报错，通常需要单独升级对应插件。例如，`html-webpack-plugin` 需要特别处理，因为原作者尚未升级到兼容 4.x 的版本。 **2. 从 2.x 到 4.x 的升级步骤** - **版本更新**： 首先确保 Node.js 版本在 8.x...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
下面，我们将详细探讨这些问题及其解决方案。 首先，Vue.js应用通常采用单页应用（SPA）模式，这意味着所有的路由都是基于JavaScript进行管理的。当用户直接访问一个非根URL（如`/about`）或者刷新页面时，浏览器会...
babel7.x和webpack4.x配置vue项目的方法步骤
11-28
这里记录一下遇到的问题以及解决方案。 1.webpack 4.x 插件 extract-text-webpack-plugin (node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead i ｢wds｣: Project ...
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
如果问题由特定第三方插件如`socket.io-client`引起，有以下两种解决方案： 1. 将`socket.io-client`的引入从`main.js`移至`public/index.html`，使用CDN： ```html <!-- public/index.html --> ...
webpack html-webpack-plugin 语法报错 es\html-webpack-plugin\default_index.ejs: Unexpected token (1:0)
词不达意难知的博客
12-26 483
webpack html-webpack-plugin 语法报错 es\html-webpack-plugin\default_index.ejs: Unexpected token (1:0)
【打包报错】ERROR Error: Cannot find module ‘html-webpack-plugin‘
jastalented的博客
12-16 2114
找不到html-webpack-plugin这个依赖插件，我们就安装这个依赖插件，然后再重新打包，咦，这样就解决了
webpack配置插件new HtmlWebpackPlugin()后报一大堆错
黎小小的博客
09-25 831
解决：target: "node",即可设置后webpack将会在node.js环境进行编译，才能读取引入的 require。
使用@vue/preload-webpack-plugin插件报错 TypeError: Cannot read properties of undefined (reading 'getParents')
01-26
根据提供的引用内容，你遇到的问题是使用@vue/preload-webpack-plugin插件报错TypeError: Cannot read properties of undefined (reading 'getParents')。这个错误通常是由于插件版本不兼容或配置错误导致的。解决这个问题的方法如下： 1. 确保@vue/preload-webpack-plugin插件的版本与webpack的版本兼容。可以查看插件的文档或者官方仓库来获取兼容的版本信息。 2. 检查插件的配置是否正确。确保在webpack配置文件中正确引入和配置了@vue/preload-webpack-plugin插件，并且没有遗漏或错误的配置项。 3. 尝试更新其他相关的依赖包。有时候插件的错误可能是由于其他依赖包版本不兼容引起的。可以尝试更新webpack和其他相关的依赖包到最新版本，然后重新安装插件。 4. 如果以上方法都没有解决问题，可以尝试使用其他类似的插件或者寻求插件作者或社区的帮助。有时候插件的错误可能是由于插件本身的bug引起的，需要等待插件作者修复或者使用其他替代方案。 下面是一个示例的webpack配置文件，演示了如何正确引入和配置@vue/preload-webpack-plugin插件： ```javascript const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin'); module.exports = { // 其他配置项... plugins: [ new PreloadWebpackPlugin(), // 其他插件... ], }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值