1.為了體驗新版webpack5看看有哪些功能的升級或能為我們所用,於是就完全用webpack從0搭建了一個腳手架前端開發工程項目,然而,在大多數都順利的前提下,竟然報錯了:
執行 npx webpack-dev-server
提示:Cannot find module 'webpack-cli/bin/config-yargs'
2.經過查閱相關API及文檔,發現本地默認安裝的新版webpack5與相關協作的功能包並不兼容,報錯前安裝的相關版本為:
"webpack": "^5.1.3",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
3.得出了結論,新版本並不與現存相關包兼容,因此我就試着以webpack5為中心,去尋找適合webpack5的webpack-cli和webpack-dev-server,然而情況不是想象的那樣,webpack5根本不與現有版本兼容,所以又把注意力轉移到webpack4,我們不得不降低webpack版本從5到4,於是有了下面的版本配置,在刪除node_modules包,及指定了以下package.json配置后,最初報錯指令被成功執行
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
執行 npx webpack-dev-server
4.總結:
至此問題得以解決,webpack問題其實挺多的,但,目前來看webpack在工程化方面又是最好的實踐,問題多在兼容性及相關配置方面,這就需要大家多實踐,別想着一定會怎樣就能很好的把問題解決。之所以有版本兼容問題,也有個很重要的原因也需要知道,不論是node 還是webpack及相關npm功能包,其實從目前來看新版本尤其是大的版本更新都改變了很多,很多從架構上都進行了更改,所以,老版本的功能包比如webpack-dev-server,並不一定能兼容新版本的webpack這就變得很正常不過了,那么我們是不是就不能使用最新版的webpack5了?其實不是。想用就要么等兼容版本,要么有精力可以自己搞一個兼容版本,在或者可以探索相關功能適合webpack5的解決方案。