内容简介：自 webpack 4.x 发布以来，就独得码农恩宠。我公司的项目是基于 webpack 3.x 版本的 vue 项目， 当时是用 vue-cli 工具构建的项目，项目开发完成后发现打包性能低下，而且项目是多页面的，需要将 打包文件分离，webpack 原有的现将自己的升级过程记录如下，希望能给需要升级 vue 项目的朋友一点参考价值。
自 webpack 4.x 发布以来，就独得 码农 恩宠。我公司的项目是基于 webpack 3.x 版本的 vue 项目，
当时是用 vue-cli 工具构建的项目，项目开发完成后发现打包性能低下，而且项目是多页面的，需要将
打包文件分离，webpack 原有的 CommonsChunkPlugin
插件难以满足需要，想用 SplitChunksPlugin
替换它，于是开始了折磨人的升级过程。
现将自己的升级过程记录如下，希望能给需要升级 vue 项目的朋友一点参考价值。
第一步：用vue-cli 工具创建一个简单的 vue webpack 项目
vue init webpack vue-webpack4-v2 复制代码
打开 package.json
文件，查看 webpack 版本信息, 发现 webpack 还是 3.x 版本
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
复制代码
第二步： 升级 npm 包
由于要升级的包很多，一个个操作起来麻烦，所以建议用npm-check工具来检查和更新包版本。
由于手动更新太麻烦，可以运行 npm-check -u
命令批量更新 npm 包
需新增的包：
- "webpack-cli": "^3.1.0"
- "mini-css-extract-plugin": "^0.4.1"
需删除的包（webpack 配置中引用该包的插件也要删除）:
- "extract-text-webpack-plugin": "^3.0.0"
- "uglifyjs-webpack-plugin": "^1.1.1"
- "optimize-css-assets-webpack-plugin": "^5.0.0"
注意：
- "eslint": "^5.3.0" 版本号不宜太高，改成 "^4.0.0"
第三步： webpack 配置升级
参考官方升级文档To v4 from v3
主要修改 build/webpack.xxx.conf.js
文件
第四步：vue-loader 配置升级
参考官方升级文档从 v14 迁移
主要修改 build/vue-loader.conf.js
和 build/webpack.xxx.conf.js
文件
注意：
-
去除掉
build/webpack.prod.conf.js中的OptimizeCSSPlugin插件
以上所述就是小编给大家介绍的《Vue 项目升级到 webpack4.x 小纪【附代码】》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
物联网导论（第2版）
刘云浩 / 科学出版社 / 2013-8 / 45.00元
物联网是一个基于互联网、传统电信网等信息承载体，让所有能够被独立寻址的普通物理对象实现互联互通的网络。它具有普通对象设备化、自治终端互联化和普适服务智能化三个重要特征。 《物联网工程专业系列教材：物联网导论（第2版）》从物联网的感知识别层、网络构建层、管理服务层和综合应用层这四层分别进行阐述，深入浅出地为读者拨开萦绕于物联网这个概念的重重迷雾，引领求知者渐渐步入物联网世界，帮助探索者把握第三......一起来看看 《物联网导论（第2版）》 这本书的介绍吧!
