自 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外掛
總結
經過上面四步，基本上能將專案成功執行了，但自己能力有限，有些配置的原理也似懂非懂，但成長的過程就是要敢於不斷的 失敗和嘗試，這樣才能一步步從陌生到熟悉。正所謂”路漫漫其修遠兮，吾將上下而求索“。