解决webpack打包错误：this.htmlWebpackPlugin.getHooks is not a function

最新推荐文章于 2024-09-03 09:31:01 发布
最新推荐文章于 2024-09-03 09:31:01 发布
阅读量9.1k 收藏 2
点赞数 1
分类专栏： Webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haoaiqian/article/details/87635802
版权

升级webpack4时踩到了很多坑，其中错误描述如下

this.htmlWebpackPlugin.getHooks is not a function
报错描述
经过一番搜索，在html-webpack-plugin的issue区看到了如下解决方法，亲测可用。
解决描述

1. 删除node_modules目录，并重新npm install安装；

2. 安装与webpack4版本匹配的htmlWebpackPlugin;

 npm i html-webpack-plugin@next

3. 修改webpack配置文件
new InterpolateHtmlPlugin(env.raw),
修改为
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
即可…

逸尘️
关注
专栏目录
Vue - Syntax Error: TypeError: this.getOptions is not a function 项目运行时报错，详细解决方案
王佳斌
11-07 5140
vue2，Syntax Error: TypeError: this.getOptions is not a function，webpack，npm run serve，报错怎么办，运行报错，run serve时出现报错如何解决，vue2项目运行报错this.getOptions is not a function，vue2怎么解决npm run serve时的Syntax Error: TypeError: this.getOptions is not a function爆红报错，Vue - Synt
遇到 bug：“ TypeError：this.getOptions is not a function ”
即使萍水也不要相逢的博客
02-22 2622
项目场景： 在进行Vue项目开发的时候，在模板文件index.html中用到了模板字符串，在模板字符串中出现了变量； PS：上述scale为变量 问题描述： 在启动项目（npm run serve）时候报错，上述scale变量不能被处理； 注意点：如果在HTML文件中用到了字符串模板，字符串模板中用到了变量，那么html-plugin是无法处理的，所以会报错，如果想解决这个问题，那么我们需要再借助一个loader：html-loader； 当小编在项目中下载并使用html-loade..
Webpack3 升级到 webpack4 时遇到的问题汇总
weixin_33895016的博客
04-04 1375
项目在对 webpack 的版本升级的过程中，出现了各种各样的问题，今天就把其中比较典型的问题总结一下，作为记录。 一、MissingDeps.some is not a function 错误提示中，提示 react-dev-utils 包有问题，TypeError: MissingDeps.some is not a function。 解决方案：升级 react-utils-dev 包到...
页面性能调优
判断一个点是否在闭合曲线内
09-24 162
最近利用闲的时间对页面进行优化，这次不是对项目的代码进行优化，而是从网络方面入手，所以不全面。 使用cdn 项目去年就开始使用cdn，所以这次只是进行设置的调整 cdn里面设置缓存时间，尽可能的长一点（一年）。 开启http2，利用http2的特性加快资源的加载（需要先开启https）。 升级http2 由于部分项目没有采用cdn，所以还是有必要升级，结果可以是加速两秒(公司服务器国外，速...
Webpack Shell 插件使用教程
最新发布
gitblog_01095的博客
09-03 429
Webpack Shell 插件使用教程 webpack-shell-pluginRun shell commands either before or after webpack builds项目地址:https://gitcode.com/gh_mirrors/we/webpack-shell-plugin 1. 项目的目录结构及介绍 webpack-shell-plugin/ ├── sr...
Webpack: Plugin 学习——功能Plugin ：在 webpack 打包输出的js文件比较小，将js文件变成行内内联样式添加到文件中
weixin_47295886的博客
04-06 382
webpack 打包生成的 runtime 文件太小了，额外发送请求性能不好，所以需要将其内联到 js 中，从而减少请求数量）——提升速度 runtime保存依赖和hash。嵌入到html中需要使用html-webpack-plugin插件。首先需要在配置文件中进行打包输出runtime文件。为了匹配度更高，将传递的规则放在配置文件中。
webpack4 TypeError: htmlWebpackPlugin.getHooks is not a function
maggie_live的博客
05-31 3843
1.使用vue-cli3，打包产生的问题； 解决方案： npm i htnl-webpack-plugin@next 参考 https://github.com/jantimon/html-webpack-plugin/issues/1068
webpack yarn start 错误 this.htmlWebpackPlugin.getHooks is not a functio
lishulingdecsdn的博客
09-11 1040
webpack yarn start 错误 this.htmlWebpackPlugin.getHooks is not a functio 删除node_modules目录，并重新npm install安装； 安装与webpack4版本匹配的htmlWebpackPlugin; 修改webpack配置文件 new InterpolateHtmlPlugin(env.raw), 修改为 new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)
webpack3——html插件（HtmlWebpackplugin）
qq_36836277的博客
05-30 691
背景：一般情况下，我们需要通过一个ip地址，或者是通过localhost的方式来访问一个页面，这种情况下，我们需要进行设置。 解决办法：使用webpack-dev-server 安装完webpack-dev-server 后，可以直接运行npx webpack-dev-server，会生成一个地址。 1.不做任何设置 如果不做任何设置，直接在项目目录下运行npx webpack-dev-serve...
webpack plugin
weixin_44832362的博客
11-22 679
这里用到 emit 钩子 及make 钩子，前者是串行后者是并行。webpack.config.js中的配置。让 小的js 文件直接内联到 html中。
html-webpack-plugin插件,webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks...
weixin_29695125的博客
07-01 1390
最近在这段时间刚好在温故下webpack源码，webpack5都出来了，4还不再学习下？这次顺便学习下webpack的常用插件html-webpack-plugin。发现这个插件里面还额外加入了自己的hooks，方便其它插件来实现自己的功能，不得不说作者真是个好人。部分代码如下// node_modules/html-webpack-plugin/index.jsapp(compiler) {//...
webpack打包css报错（已解决）：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
qq_45914170的博客
01-07 4556
UnhandledPromiseRejectionWarning错误解决 今天在学习codewhy老师的webpack课程时，安装webpack的loader时，报了下面这些错误 (node:13936) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function at Object.loader (D:\桌面\前端代码\vue\webpack\learnWebpack-01\webpack的配置\no
webpack使用loader在进行打包时报错（已解决）TypeError: this.getResolve is not a function
webchang的博客
01-15 918
webpack使用loader在进行打包时报错，版本问题
Syntax Error: TypeError: this.getOptions is not a function
木子聊前端
02-25 8680
场景重现 通过vue-cli搭建一个vue3.0项目，在使用less 的时候报错，依据官方的安装： npm install -D less-loader less 安装的都是最新的 其中less-loader 是今天最新的 8.0.0 版本。 这时候运行 npm run serve 提下如下错误 通常提示 Syntax Error: TypeError: this.getOptions is not a function 提示语法错误都是 版本问题 解决 1，通过降级版本号是最快捷的方法 卸载 les
【036】html-webpack-plugin2.22.0、Webpack与gulp结合时出现ReferenceError: window is not defined错误的解决办法
热门推荐
zhangchao19890805的专栏
08-12 1万+
一、问题描述下面是在命令行给出的错误提示：[10:16:36] Starting 'webpack'... Unhandled rejection Error in plugin 'webpack-stream' Message: ReferenceError: window is not defined - index.html:50 Object.<anonymous> D
webpack3+和extract-text-webpack-plugin 时遇到 Cannot read property 'thisCompilation' of undefined 错误
qq_34672907的博客
04-28 1万+
最近接手公司前端外包出去的的项目，然后在npm run build的时候遇到了两个问题。 第一点是  A complete log of this run can be found in: npm ERR!     C:\Users\90422\AppData\Roaming\npm-cache\_logs\2018-04-28T09_26_42_435Z-debug.log 这个问题很简单
webpack4配置详解之常用插件分享
weixin_34319999的博客
11-19 436
　　前言　　　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也会包含一些自己了解过觉得不错的插件，如有分析不到位的，欢迎纠错，嗯，这些东西文档都有，大佬可绕过。　　　　Wepack4之后废弃了很多的插件，这里只会讲解webpack4还支持的（包含4之前插件），已经废弃的将不再阐述。　　　　上一次的分享之后，有部分掘金网友留言质疑：骗小白的赞、是否原创、是否是抄...
[webpack-cli] TypeError: compiler.getInfrastructureLogger is not a function【webpack与webpack-cli不兼容】
weixin_46435234的博客
05-16 7957
首先将之前的安装的版本删除 npm uninstall webpack webpack-cli -g //这是全局删除 重新指定版本下载： npm install webpack@4.16.5 webpack-cli@3.3.11 -g
TypeError: HtmlWebpackPlugin.getHooks is not a function
04-05
This error occurs when you are using an outdated version of the HtmlWebpackPlugin plugin or when there is a compatibility issue with other plugins or dependencies. To fix this error, you can try the following solutions: 1. Update the HtmlWebpackPlugin plugin to the latest version: ``` npm install --save-dev html-webpack-plugin@latest ``` 2. Check if there are any other plugins or dependencies that are causing conflicts with HtmlWebpackPlugin. You can try disabling them one by one to identify the culprit. 3. If you are using webpack 4 or earlier, you may need to use the `html-webpack-plugin` package instead of `html-webpack-plugin@next`. ``` npm install --save-dev html-webpack-plugin ``` 4. Ensure that you are importing the plugin correctly in your webpack config file: ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); ``` 5. If none of the above solutions work, try deleting your `node_modules` folder and running `npm install` to reinstall all your dependencies.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逸尘️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值