自 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插件
总结
经过上面四步，基本上能将项目成功运行了，但自己能力有限，有些配置的原理也似懂非懂，但成长的过程就是要敢于不断的 失败和尝试，这样才能一步步从陌生到熟悉。正所谓”路漫漫其修远兮，吾将上下而求索“。