webpack 3.X升級 webpack 4.X
阿新 • • 發佈：2020-08-18
背景：
目前公司維護的一個大概兩年前開的vue專案，啟動老慢了，jenkins釋出那更不用說，七八分鐘吧也就
先看下本地啟動和打包分別耗時
打包：
啟動
另外，jenkins上node居然是6.x版本！！！七八分鐘常理之中了那就。
升級後：
啟動
打包
jenkins釋出運氣好的時候2分多，一般3分多一點
這過程程式碼打包優化我做的不多，基本就是環境的升級，驚歎webpack4的魔力~
過程
1、先升級webpack,4.x需要 cli腳手架，一併安裝 ，對應的 webpack-dev-server 需要一併升級
cnpm i --save-dev webpack@4 cnpm install--save-dev webpack-cli cnpm i webpack-dev-server@3.10.3
2、然後就可以啟動了，會發現報很多錯，其實大部分都是版本號不相容，看哪個包報錯就升級哪個
列舉幾個
happypack、copy-webpack-plugin...
npm i happypack@5.0.0 --save-dev cnpm i copy-webpack-plugin@5.0.4 --save-dev cnpm i vue-loader@15.9.1 --save-dev cnpm i vue-style-loader@4.1.0 --save-dev cnpm i css-loader@3.4.2 --save-dev
另外我專案中升級後會有一些問題：
（1）css-loader 升級後不支援minimize
（2）webpack4不支援extract-text-webpack-plugin （3）升級vue-loader之後會報錯，需要配置VueLoaderPlugin// webpack-base.config const VueLoaderPlugin = require('vue-loader/lib/plugin'); plugins:[ new VueLoaderPlugin() ]
3、針對專案
（1）將webpack.base.config中的gzip壓縮移到webpack.prod.config (2) webpack.prod.config mode 設定為production （webpack4配置引數） （3）jenkins升級node版本 v10+，配置淘寶映象 （有升級的包npm下載不下來）npm install -g cnpm --registry=https://registry.npm.taobao.org
基本操作下來，速度明顯提升了很多，體積大概減少了6/7M，就是升級包很多語法不相容比較麻煩，總之，能升級就最好升級~