webpack3升级到webpack4遇到问题总结
欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0930/116266.html
最近由于项目需要,需要对已有的两个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.
原因:webpack升级,html-webpack-plugin未匹配
解决方案:升级html-webpack-plugin插件
升级插件到 html-webpack-plugin: “^3.2.0”版本,再次运行,报错
4、运行报错:Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
原因:更新webpack,未更新vue-loader
解决:npm i -D vue-loader
注意:webpack4需要在配置中加入插件的引用才会生效
const VueLoaderPlugin = require('vue-loader/lib/plugin’);//配置中加入plugins: [ new VueLoaderPlugin()],
6、报错
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、删除
9、BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object ‘#
npm run dev不报错,但是在浏览器打开,控制台报错