webpack作為最使用最廣泛的前端打包工具，已經成為前端工程化基礎設施的一部分。而Webpack上一個大版本更新已經是18年的時候了，兩年時間過去了讓我們看看Webpack5都帶來了哪些新特性，對我們的應用又有哪些幫助。

概覽

下面這張圖是 Webpack 官方 Changelog 里面截圖出來的，可以看到​主要有這些方面的提高：

• 通過持久化緩存提高性能
• 采用更好的持久化緩存算法和默認行為
• 通過優(yōu)化 Tree Shaking 和代碼生成來減小Bundle體積
• 提高 Web 平臺的兼容性
• 清除之前為了實現(xiàn) Webpack4 沒有不兼容性變更導致的不合理 state
• 嘗試現(xiàn)在引入重大更改來為將來的功能做準備，以使我們能夠盡可能長時間地使用 Webpack 5
  

不得不說，這個官方聲明稍微簡略了一點，只提到了持久化緩存優(yōu)化性能和更好的 Tree Shaking，Module federation 這個重大特性居然提都沒有提。下面還是跟著小編看看具體都升級了哪些部分。

過時功能移除

首先是去掉了在 Webpack4 里面已經 Warming 的功能。

同時 IgnorePlugin 和 BannerPlugin 現(xiàn)在必須傳入一個參數(shù)，參數(shù)可以是 Object、String或者Function

require.include 語法被廢棄，使用時會有 Warming。當然這個行為可以通過 Rule.parser.requireInclude 來把這個語法改成 allowed, deprecated 或者 disabled

去掉自動 Node.js Polyfills 。早期 Webpack 的主要目的是讓 Node.js 的模塊能夠在瀏覽器運行，但隨著模塊格局的改變，越來越多的模塊只用于瀏覽器，這個時候再自動 Polyfills 一些 Node 模塊（例如 crypto）無疑會增加打包體積，在 Webpack5 之后去掉了這個自動行為

長期緩存

確定性的模塊、模塊ID和導出名稱。

• 首先是模塊、ID和導出名稱都唯一確定下來，背后對應的配置是 chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
• 其中模塊和模塊ID用 3 ~ 4 位的數(shù)字ID，導出名稱用 2 位的數(shù)字ID
• 這個設置是默認開啟的，但也允許通過上述配置修改

真實內容哈希

• 在 Webpack5 里會使用文件內容的真實哈希 [contenthash]，而不是之前的僅僅使用文件內部結構的哈希
• 這對于長期緩存有著積極的影響，尤其是代碼里面只有注釋和變量名修改的時候，Webpack會繼續(xù)用之前的緩存而不是新的文件內容

開發(fā)支持

首先是 Chunk IDs 語義化。

新的 Chunk IDs 使用了新的語法生成 Chunk ID，一個 Chunk ID 是有 chunk 的內容來決定的。所以我們不再需要 import(/* webpackChunkName: "name" */ "module") 來 debugging 了

但這樣也有可能把 chunk 里面的敏感內容暴露出去（如果有的話），可以 通過修改 chunkIds: "named"來修改這一行為

其次是 Module Federation

• 這是一個值得濃墨重彩的特性。模塊聯(lián)邦 允許多個 Webpack 構建產物一起工作，在運行時把多個構建產物聚合到一起，看起來就像是一個大的構建產物一樣。
• 比如下面這個例子 app_one 和 app_two 使用了共享的 ["react", "react-dom","react-router-dom"]，同時 app_two 把自己的 Dialog 暴露給了 app_one 使用
• 通過模塊聯(lián)邦可以原生解決模塊直接互相依賴的問題，在微前端領域尤其適用！同時一些基礎依賴也有可能都改成外部依賴，在本地開發(fā)的時候就無需引入，通過避免眾所周知的 node_modules 層次太深的問題，在本地開發(fā)過程中有可能實現(xiàn)大幅提效

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-dom","react-router-dom"]
  }),
  new HtmlWebpackPlugin({
   template: "./public/index.html",
   chunks: ["main"]
  })
 ]
};

更好的 Tree Shaking。

嵌套 tree-shaking。 Webpack現(xiàn)在會去追蹤 export 的鏈路，對于嵌套場景有更好的優(yōu)化，比如下面這個例子里 b 是不會出現(xiàn)在生產代碼里。

// 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 。最終可以實現(xiàn)標記更多沒有使用的導出項

import { something } from "./something";

function usingSomething() {
return something;
}

export function test() {
return usingSomething();
}

Commondjs。現(xiàn)在Webpack不僅僅支持 ES module 的 tree Shaking，commonjs規(guī)范的模塊開始支持了

其他特性

• 新的 Web 平臺支持。在Webpack 5 里面開始原生支持 JSON Modules、Asset Modules、Native Worker 和 異步模塊等等
• Webpack 生成的代碼不再僅僅是ES5，也會生成 ES6 的代碼
• Node.js 的最小支持版本從 6 升級到了 10
  

喜歡嘗鮮的同學現(xiàn)在就可以照著遷移指南升級自己的Webpack了，出于謹慎考慮建議優(yōu)先從從自己練手和后臺類應用開始升級
遷移指南：https://github.com/webpack/changelog-v5/blob/master/MIGRATION%20GUIDE.md

小結

可以看到，兩年時間過去 Webpack5 進行了大量的升級，包括更好的性能、更強的開發(fā)能力支持以及更多原生的特性。而Webpack5帶來的影響也不僅僅于此，Module Federation 對于模塊依賴關系的改變，對于現(xiàn)有開發(fā)模式的沖擊還在進一步觀察中。期待 Web 開發(fā)越來越好。

到此這篇關于Webpack5正式發(fā)布,有哪些新特性的文章就介紹到這了,更多相關Webpack5 新特性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論