webpack3升级到webpack4遇到问题总结

　　

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

　　

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

　　 　　 　　npm我- d webpack webpack-cli webpack-dev-server webpack-merge 　　 　　

2,运行npm运行dev,报错:错误:webpack.optimize。config.optimization CommonsChunkPlugin已被删除,请使用。splitChunks。

　　

webpack3升级到webpack4遇到问题总结

　　

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

　　

3,运行报错:错误:插件不能注册在“html-webpack-plugin-before-html-processing”。钩没有发现。
　　

　　

webpack3升级到webpack4遇到问题总结

　　

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

　　

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

　　

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

　　

webpack3升级到webpack4遇到问题总结”> <br/> 　　</p> 　　<p>原因:项目中自定义由于需要,需要对每一个打包好模的html版都插入一段js,所以基于html-webpack-plugin自定义了一段插件代码,但是该代码需要根据webpack4重新处理一下,参考官网:https://github.com/jantimon/h..。<br/> 　　</p> 　　<p>解决:<br/> 　　</p> 　　<p>第一步:升级插件npm我- d html-webpack-plugin@next; <br/> 　　第二部修改自定义代码部分,如图:<br/> 　　</p> 　　<p> <img src=

　　

4,运行报错:错误:块。entrypoints:使用块。groupsIterable和过滤instanceof入口点而不是

　　

webpack3升级到webpack4遇到问题总结”> <br/> 　　</p> 　　<p>原因:既然webpack v4 extract-text-webpack-plugin不应该用于css。使用mini-css-extract-plugin代替。<br/> 　　</p> 　　<p>解决:npm安装extract-text-webpack-plugin@next; <br/> 　　</p> 　　<p>只更新extract-text-webpack-plugin可能没的用,最好更新成mini-css-extract-plugin,具体可看第6步</p> 　　<p> 5,报错:TypeError:无法读取属性的vue定义</p> 　　<p> <img src=

　　

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

　　

解决:npm我- d vue-loader
　　

　　

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

　　 　　 　　const VueLoaderPlugin=要求(“vue-loader/lib/插件”);//配置中加入 　　插件:[ 　　新的VueLoaderPlugin () 　　), 　　 　　

6,报错
　　

　　

webpack3升级到webpack4遇到问题总结

　　

切换为mini-css-extract-plugin

　　

webpack3升级到webpack4遇到问题总结

　　

7,视情况更新

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

8,删除

　　

webpack3升级到webpack4遇到问题总结”> <br/> 　　</p> 　　<p>在配置中加入</p> 　　<p> <img src=

　　

9日BaseClient.js& # 63; e917:12未捕获TypeError:不能分配阅读alt=" webpack3升级到webpack4遇到问题总结”>
　　

　　

原因,webpack4之后,不允许混用出口和进口
　　

　　

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

　　

webpack3升级到webpack4遇到问题总结

　　

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

webpack3升级到webpack4遇到问题总结