Webpack5正式釋出,有哪些新特性
webpack作為最使用最廣泛的前端打包工具，已經成為前端工程化基礎設施的一部分。而Webpack上一個大版本更新已經是18年的時候了，兩年時間過去了讓我們看看Webpack5都帶來了哪些新特性，對我們的應用又有哪些幫助。
概覽
下面這張圖是 Webpack 官方 Changelog 裡面截圖出來的，可以看到主要有這些方面的提高：
- 通過持久化快取提高效能
- 採用更好的持久化快取演算法和預設行為
- 通過優化 Tree Shaking 和程式碼生成來減小Bundle體積
- 提高 Web 平臺的相容性
- 清除之前為了實現 Webpack4 沒有不相容性變更導致的不合理 state
- 嘗試現在引入重大更改來為將來的功能做準備，以使我們能夠儘可能長時間地使用 Webpack 5
不得不說，這個官方宣告稍微簡略了一點，只提到了持久化快取優化效能和更好的 Tree Shaking，Module federation 這個重大特性居然提都沒有提。下面還是跟著小編看看具體都升級了哪些部分。
過時功能移除
首先是去掉了在 Webpack4 裡面已經 Warming 的功能。
同時 IgnorePlugin 和 BannerPlugin 現在必須傳入一個引數，引數可以是 Object、String或者Function
require.include 語法被廢棄，使用時會有 Warming。當然這個行為可以通過 Rule.parser.requireInclude
去掉自動 Node.js Polyfills 。早期 Webpack 的主要目的是讓 Node.js 的模組能夠在瀏覽器執行，但隨著模組格局的改變，越來越多的模組只用於瀏覽器，這個時候再自動 Polyfills 一些 Node 模組（例如 crypto）無疑會增加打包體積，在 Webpack5 之後去掉了這個自動行為
長期快取
確定性的模組、模組ID和匯出名稱。
- 首先是模組、ID和匯出名稱都唯一確定下來，背後對應的配置是
chunkIds: "deterministic",moduleIds: "deterministic",mangleExports: "deterministic" - 其中模組和模組ID用 3 ~ 4 位的數字ID，匯出名稱用 2 位的數字ID
- 這個設定是預設開啟的，但也允許通過上述配置修改
真實內容雜湊
- 在 Webpack5 裡會使用檔案內容的真實雜湊 [contenthash]，而不是之前的僅僅使用檔案內部結構的雜湊
- 這對於長期快取有著積極的影響，尤其是程式碼裡面只有註釋和變數名修改的時候，Webpack會繼續用之前的快取而不是新的檔案內容
開發支援
首先是 Chunk IDs 語義化。
新的 Chunk IDs 使用了新的語法生成 Chunk ID，一個 Chunk ID 是有 chunk 的內容來決定的。所以我們不再需要 import(/* webpackChunkName: "name" */ "module") 來 debugging 了
但這樣也有可能把 chunk 裡面的敏感內容暴露出去（如果有的話），可以 通過修改 chunkIds: "named"來修改這一行為
其次是 Module Federation
- 這是一個值得濃墨重彩的特性。模組聯邦 允許多個 Webpack 構建產物一起工作，在執行時把多個構建產物聚合到一起，看起來就像是一個大的構建產物一樣。
- 比如下面這個例子 app_one 和 app_two 使用了共享的
["react","react-dom","react-router-dom"]，同時 app_two 把自己的 Dialog 暴露給了 app_one 使用 - 通過模組聯邦可以原生解決模組直接互相依賴的問題，在微前端領域尤其適用！同時一些基礎依賴也有可能都改成外部依賴，在本地開發的時候就無需引入，通過避免眾所周知的 node_modules 層次太深的問題，在本地開發過程中有可能實現大幅提效
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "app_two_remote",library: { type: "var",name: "app_two_remote" },filename: "remoteEntry.js",exposes: {
“./Dialog”: "./src/Dialog"
},remotes: {
app_one: "app_one_remote",},shared: ["react","react-router-dom"]
}),new HtmlWebpackPlugin({
template: "./public/index.html",chunks: ["main"]
})
]
};
更好的 Tree Shaking。
巢狀 tree-shaking。 Webpack現在會去追蹤 export 的鏈路，對於巢狀場景有更好的優化，比如下面這個例子裡 b 是不會出現在生產程式碼裡。
// inner.js
export const a = 1;
export const b = 2;
// module.js
import * as inner from "./inner";
export { inner }
// user.js
import * as module from "./module";
console.log(module.inner.a);
內部模組。Webpack 4 不會去分析匯入和匯出模組之間的依賴關係，Webpack5 裡面會通過 optimization.innerGraph記錄依賴關係。比如下面這個例子，只有 test 方法使用了 someting 。最終可以實現標記更多沒有使用的匯出項
import { something } from "./something";
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
Commondjs。現在Webpack不僅僅支援 ES module 的 tree Shaking，commonjs規範的模組開始支援了
其他特性
- 新的 Web 平臺支援。在Webpack 5 裡面開始原生支援 JSON Modules、Asset Modules、Native Worker 和 非同步模組等等
- Webpack 生成的程式碼不再僅僅是ES5，也會生成 ES6 的程式碼
- Node.js 的最小支援版本從 6 升級到了 10
喜歡嚐鮮的同學現在就可以照著遷移指南升級自己的Webpack了，出於謹慎考慮建議優先從從自己練手和後臺類應用開始升級
遷移指南：https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md
小結
可以看到，兩年時間過去 Webpack5 進行了大量的升級，包括更好的效能、更強的開發能力支援以及更多原生的特性。而Webpack5帶來的影響也不僅僅於此，Module Federation 對於模組依賴關係的改變，對於現有開發模式的衝擊還在進一步觀察中。期待 Web 開發越來越好。
到此這篇關於Webpack5正式釋出,有哪些新特性的文章就介紹到這了,更多相關Webpack5 新特性內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！