本文接上篇博客記錄一些配置的升級過程中遇到的坑。
1、設置mode
通過指定mode參數,啟用對應環境下webpack內置的優化。有三個可選參數:development,production,none。默認值為production,生產環境在production模式下,會自動壓縮代碼,可以去除之前配置的一些壓縮代碼的插件。
2、use寫法不同
rules 中對loader的指定寫法,支持寫對象和數組模式
3、改寫file-loader 和 url-loader
在webpack4前我們對一些靜態資源的配置,都是通過file-loader 和 url-loader,webpack5引入資源模塊的配置,不需要再配置了
4、對插件的引用和使用的更改
merge 的引用改成:
CopyWebpackPlugin的寫法改成:
分離css的組件改成 mini-css-extract-plugin
:
對文件的壓縮處理,放在optimization里性能更好
棄用之前的文件分離,采用新的分離和緩存機制
CompressionWebpackPlugin的寫法改寫
5、報錯處理
出現類似的報錯,查出原因是寫法不對,版本太低,直接升級對應組件的版本就可以了
但是后來發現 iview 也有類似的報錯,於是痛定思痛一起把iview的版本也升級了。升級iview還是蠻無縫的,目前遇到的不一致的有:
1、任何使用 from 'iview' 的都要替換為 from 'view-design’
2、新版的組件默認文字像素大小是14px
3、tree 的 render自定義寫法有區別
6、結束語
升級后的構建和打包速度還是很感人的,盡管升級過程中遇到不少細節坑,但是進一步對webpack的配置有了更多理解,還是比較有收獲的,如果你的項目打包構建很慢,也是時候更新一把了~~