Webpack3 升级到 webpack4 时遇到的问题汇总

最新推荐文章于 2024-09-27 10:57:19 发布
最新推荐文章于 2024-09-27 10:57:19 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端开发 Webpack 异常处理 文章标签： 前端开发 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgd826237710/article/details/89015743
版权
在将Webpack从3升级到4的过程中，遇到了如MissingDeps.some is not a function、this.htmlWebpackPlugin.getHooks is not a function和“proxy”配置问题。解决方案包括升级包到最新版本、调整webpack配置及使用src/setupProxy.js文件处理proxy设置。详细解决步骤见正文。
摘要由CSDN通过智能技术生成

文章目录

项目在对 webpack 的版本升级的过程中，出现了各种各样的问题，今天就把其中比较典型的问题总结一下，作为记录。

一、MissingDeps.some is not a function

错误提示中，提示 react-dev-utils 包有问题，TypeError: MissingDeps.some is not a function。

  • 解决方案：升级 react-utils-dev 包到 6.0.0 版本之后即可。将 package.json 中的 react-utils-dev 依赖删除掉，重新安装匹配版本插件。
$ npm install react-utils-dev@next --save-dev

二、this.htmlWebpackPlugin.getHooks is not a function

运行项目时，提示错误：this.htmlWebpackPlugin.getHooks is not a function

  • 解决方案：
    • 1.安装与 webpack4 匹配的 html-webpack-plugin 插件：npm install html-webpac
最低0.47元/天 解锁文章
浮沉半生
关注
专栏目录
webpack 升级5.x遇到的问题
时遇的博客
05-23 2033
webpack 升级5.x遇到的问题 之前的djaongo+vue项目，使用webpack打包，运行正常，但是有段时间未修改，重新运行npm run dev时发现报错，原因是webpack的升级,从v4->v5,需要升级webpack-cli、plugin、loader，以及部分废弃的配置需要升级，在此记录遇到的问题及解决方法。 文章目录webpack 升级5.x遇到的问题项目使用的依赖版本问题及解决方法总结参考博客 项目使用的依赖版本 // package.json { "dependenc
webpack3升级到webpack4遇到的问题
龙马的猫
10-09 808
因项目需要，要将webpack3升级到webpack4，升级前版本webpack@3.6.0 安装webpack4 npm install webpack webpack-cli --save-dev 安装完成 安装完成运行项目报错： 1.报错：Error: Cannot find module 'webpack/bin/config-yargs’ 原因：webpack 和 webpack-dev-server版本不匹配，更新webpack-dev-server 更新之后版本3.11.0 ...
实战笔记：Vue2项目Webpack 3升级到Webpack 4的实操指南
最新发布
Jiaberrr的博客
09-27 2018
这个问题问得很好，我最开始也是直接一键升级到最新版，一启动，直接报各种版本不匹配（哭），由于项目比较大引入的依赖太多，实在是难以推进，所以退而求其次，先升级到webpack4.x，后面再想办法往上升！！！如果改完可以正常启动，那么恭喜你！升级成功了！！如果不幸失败了，那么。。。很抱歉没有给你提供有效的帮助（哭），你也可以留言或私信，我看看有没有遇到类似报错。希望我的经验能帮助你在升级Vue2项目到Webpack 4的过程中少走弯路！
webpack合并配置报错：TypeError: webpackMerge is not a function
qq_36350876的博客
07-23 977
我将dev配置和prod配置分离之后，把公共的配置抽离出来后，使用webpackMerge进行合并配置后，使用npm run build 报错了，提示：TypeError: webpackMerge is not a function。 报错提示如下： 我的dev和prod配置如下： 查找原因之后发现时这个问题：因为webpackMerge不是一个function， 只需要在dev和prod配置里面使用webpackMerge.merge即可解决; 如下图： ...
webpack升级4出现的问题
weixin_30790841的博客
06-03 158
webpack3升级到4出现了很多问题，经过验证报错信息如下 1 Module parse failed: Unexpected token (6:9) You may need an appropriate loader to handle this file type. | //Vue.use(Router) | var Login = function Login() { &...
webpack优化和升级到webpack4y遇到的问题
qq1498982270的博客
07-10 872
webpack优化 1、就是减少打包体积，避免加载不需要的资源 提高构建速度 缩小编译范围，减少不必要的编译工作，即 modules、mainFields、noParse、includes、exclude、alias全部用起来。 开启enforeExtension dll loader缓存（cacheDirectory) dll DLLPlugin插件，对不常更新的库，一次打包，存在...
webpack3升级到webpack4遇到问题总结
10-16
以上就是从webpack3升级到webpack4时可能遇到的主要问题及其解决方法。这个过程可能涉及代码重构和配置调整，但遵循这些步骤可以帮助顺利完成升级。在升级过程中，建议查阅官方文档和社区资源，以便获取最新信息和...
Vue项目从webpack3.x升级webpack4不完全指南
10-17
在讨论Vue项目从webpack3.x升级到webpack4.x的不完全指南时，我们首先要认识到webpack是一个用于现代JavaScript应用程序的静态模块打包器。它通过打包应用程序所需的资源来提供模块化、调试和性能优化等功能。而Vue....
webpack@v4升级踩坑(小结)
10-17
这篇文章将总结在升级到 Webpack 4 过程中可能遇到的问题及解决方案。 首先，升级前应仔细阅读官方的更新日志，以了解新版本的主要变化。其中值得注意的几点包括： 1. **命令行接口（CLI）分离**：在 Webpack 4 中...
webpack升级到4版本遇到的坑
老夫风清扬的博客
03-13 5207
问题一：CommonsChunkPlugin插件的报错，因为webpack4已经把该插件移除了，用optimization.splitChunks替代 报错信息如下： Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. ...
Webpack4 升级报错 Error: Cannot find module 'webpack-cli/bin/config-yargs' 等（含html-webpack-plugin）
曦璞维一的技术博客
10-18 1万+
问题一 Error: Cannot find module 'webpack-cli/bin/config-yargs' 问题二 TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function 问题三 TypeError: Cannot read property 'eslint' of undefined 问题四 TypeError: Cannot read property 'vue' of undefined
ruoyi接口权限校验
xuhss_com的博客
06-21 2116
此文章属于ruoyi项目实战系列ruoyi系统在前端主要通过权限字符包含与否来动态显示目录和按钮。为了防止通过http请求绕过权限限制，后端接口也需要进行相关权限设计。由于对原理还不够深入了解，所以此处只粗浅讲解在ruoyi项目是如何应用的。 在请求调用接口前，被注解的接口需要首先通过验证。通过注解参数返回值和来判断是否有权限。 Ruoyi并没有使用原生的Spel表达式，而是使用了自定义的类，通过其中自定义方法 来进行权限判断。注解使用举例： 接口权限校验流程 粗略用两个例子来讲解前端请求如何经过后端接口权
关于android已经加了permission却仍报错的问题
ysw361564483的博客
10-06 750
已经在Manifest文件中添加了uses-perssion权限 位置也对 却仍报错的原因：   geogle在android23之后做了权限控制。一些敏感权限，即是你声明了，代码中使用到的时候，也要重新提示用户然后给于授权的。   解决方法：把targetSDkVersion改为23以下 （eg：22）   参考：http://ask.csdn.net/questi
JS中常见的 “函数名 is not a function” 错误
热门推荐
weixin_40345099的博客
09-30 27万+
js中常见的错误，例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外，还有一种很奇怪的情况：函数本身没有错，但是运行时就是不能正常运行。这种情况与javascript的特性有关：变量与函数声明前置的优先级。 首先看代码： console.log(x) console.log(x()); var x=1; function x(){...
webpack 4报错
heyuqing32的博客
12-14 871
报错1： The CLI moved into a separate package：webpack-cli  Would you like to install webpack-cli ( That will run npm install -D webpack-cli)( yes/No ) 解决方案： 方案一：webpack 已经更新，webpack 4.0 之后 命令行单独分出一个包，...
【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
webpack HtmlWebpackPlugin插件常用配置
weixin_34310785的博客
04-02 720
webpack使用日常，使用webpack是需要压缩html模板代码请注意 var HtmlWebpackPlugin = require('html-webpack-plugin') webpackconfig = { ... plugins: [ new HtmlWebpackPlugin({ template: 'src/index....
webpack4配置详解之常用插件分享
weixin_34319999的博客
11-19 436
　　前言　　　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也会包含一些自己了解过觉得不错的插件，如有分析不到位的，欢迎纠错，嗯，这些东西文档都有，大佬可绕过。　　　　Wepack4之后废弃了很多的插件，这里只会讲解webpack4还支持的（包含4之前插件），已经废弃的将不再阐述。　　　　上一次的分享之后，有部分掘金网友留言质疑：骗小白的赞、是否原创、是否是抄...
webpack2升级webpack4
08-04
升级webpack2到webpack4需要进行以下几个步骤： 1. 首先，你需要更新html-webpack-plugin插件的版本。可以通过运行以下命令来安装最新版本的html-webpack-plugin插件： ``` npm install html-webpack-plugin@4 -D `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值