第五代webpack昨天發(fā)布，距離上一個(gè)版本4.0有兩年的時(shí)間，這次的發(fā)版給javascript生態(tài)中最常用的打包模塊帶來了很多變化。如果像我一樣，在webpack興起之前就開始了你的前端生涯，你還記得在工作中使用gulp和grunt的抱怨和沮喪嗎？

讓我們來看看這個(gè)非常受歡迎的庫的新版本帶來的重大變化和改進(jìn)

這個(gè)版本需要關(guān)注5個(gè)關(guān)鍵點(diǎn)

快速持久的構(gòu)建

開發(fā)者們抱怨最多的就是關(guān)于webpack的打包速度太慢。這個(gè)模塊打包現(xiàn)在提供了一共文件緩存系統(tǒng)，通過打包加速可以提高我們的開發(fā)生產(chǎn)力。

更小的包體積

改善已經(jīng)做了TreeShaking的代碼（已被稱為廢棄代碼）。同時(shí)上一個(gè)版本有能力移除沒用的代碼，webpack5更進(jìn)了一步。webpack有能力移除代碼里的內(nèi)部模塊，從而減少體積。更多webpack5的優(yōu)化特性，訪問https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-optimization

更長(zhǎng)的緩存

在打包大小之后，最能改善應(yīng)用加載時(shí)間的是緩存。有緩存后，訪問者訪問你的應(yīng)用體檢幾乎是瞬間打開的。在webpack 5中，對(duì)代碼所做的改變不會(huì)改變最小化版本(例如，注釋或變量名)，不會(huì)導(dǎo)致緩存失效。意味著你的用戶將能夠體驗(yàn)長(zhǎng)時(shí)間的緩存。

現(xiàn)在進(jìn)行重大更改，以便以后進(jìn)行進(jìn)一步的改進(jìn)

在此版本有許多改變將不會(huì)有任何的顯性影響。換句話來說，在未來的版本里會(huì)允許使用新的特性。

這些新的特性包括用http(s) 導(dǎo)入 module 擴(kuò)展。它將幫你開發(fā)微前端。還有更多新的并且讓人興奮的特性，可以訪問https://webpack.js.org/blog/2020-10-10-webpack-5-release/#experiments

另外一個(gè)改變是Nodejs版本需要從6到10.13.0，放棄對(duì)舊Node.JS版本的支持將允許團(tuán)隊(duì)簡(jiǎn)化他們的代碼，并刪除支持這些舊版本的解決方案。

webpack5同時(shí)也帶來了一個(gè)新的 experiments 配置選項(xiàng)支持 WebAssembly， Async Web Assembly， Top Level Await 并且輸出你的包成一個(gè)模塊（之前只有rollup支持）

模塊聯(lián)邦

這是個(gè)新的特性，簡(jiǎn)單說，允許多個(gè) webpack 構(gòu)建在一起工作。它允許你的應(yīng)用動(dòng)態(tài)加載代碼從其它應(yīng)用（webpack打包的）。模塊聯(lián)合最流行的應(yīng)用是啟用微前端架構(gòu)。

如果你感興趣學(xué)習(xí)更多，可以訪問https://webpack.js.org/concepts/module-federation/