webpack3升级到webpack4遇到问题总结


Posted in Javascript onSeptember 30, 2019

最近由于项目需要,需要对已有的两个vue项目进行webpack3升级到webpack4,此处记录一下整个升级过程的几个重要步骤,以及遇到的问题和解决方案。

1、更新webpack以及相关联插件,webpack4新增插件webpack-cli

npm i -D webpack webpack-cli webpack-dev-server webpack-merge

2、运行npm run dev,报错:Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

webpack3升级到webpack4遇到问题总结

原因:webpack.optimize.CommonsChunkPlugin 已废弃,修改为webpack.optimize.SplitChunksPlugin

3、运行报错:Error: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.

webpack3升级到webpack4遇到问题总结

原因:webpack升级,html-webpack-plugin未匹配

解决方案:升级html-webpack-plugin插件

升级插件到 html-webpack-plugin: “^3.2.0”版本,再次运行,报错

webpack3升级到webpack4遇到问题总结

原因:项目中自定义由于需要,需要对每一个打包好的html模版都插入一段js,所以基于html-webpack-plugin自定义了一段插件代码,但是该代码需要根据webpack4重新处理一下,参考官网:https://github.com/jantimon/h...

解决:

第一步:升级插件 npm i -D html-webpack-plugin@next;
第二部修改自定义代码部分,如图:

webpack3升级到webpack4遇到问题总结

4、运行报错:Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack3升级到webpack4遇到问题总结

原因:Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

解决: npm install extract-text-webpack-plugin@next;

只更新extract-text-webpack-plugin可能没用,最好更新成mini-css-extract-plugin,具体可看第6步

5、报错:TypeError: Cannot read property 'vue' of undefined

webpack3升级到webpack4遇到问题总结

原因:更新webpack,未更新vue-loader

解决:npm i -D vue-loader

注意:webpack4需要在配置中加入插件的引用才会生效

const VueLoaderPlugin = require('vue-loader/lib/plugin');
//配置中加入
plugins: [
  new VueLoaderPlugin()
],

6、报错

webpack3升级到webpack4遇到问题总结

切换为mini-css-extract-plugin

webpack3升级到webpack4遇到问题总结

7、视情况更新

"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10”,
"html-webpack-exclude-assets-plugin": "0.0.7",
"html-webpack-inline-chunk-plugin": "^1.1.1",

8、删除

webpack3升级到webpack4遇到问题总结

在配置中加入

webpack3升级到webpack4遇到问题总结

9、BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object ‘#
npm run dev不报错,但是在浏览器打开,控制台报错

webpack3升级到webpack4遇到问题总结

原因,webpack4之后,不允许混用 exports和import

解决: 修改include部分为下边这样

webpack3升级到webpack4遇到问题总结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
js数组的操作指南
Dec 28 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 #Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 #Javascript
JavaScript中的null和undefined用法解析
Sep 30 #Javascript
vue resource发送请求的几种方式
Sep 30 #Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 #Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 #Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 #Javascript
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
批量实现面向对象的实例代码
2013/07/01 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
python实现一次创建多级目录的方法
2015/05/15 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python爬虫请求头设置代码
2020/07/28 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
财会自我鉴定范文
2013/12/27 职场文书
风险评估实施方案
2014/03/09 职场文书
教师业务培训方案
2014/05/01 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
邀请函范文
2015/02/02 职场文书
结婚十年感言
2015/07/31 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
Redis 限流器
2022/05/15 Redis