闊別兩年，webpack 5 正式發(fā)布了！
HI，繼 Vue 3 和 React 17 之后，我又來啦！印記中文已經(jīng)完成了 webpack v5 中文文檔的同步及翻譯工作，大家可以無縫進(jìn)行閱讀哦。
文檔地址請認(rèn)準(zhǔn)：https://webpack.docschina.org
文檔地址請認(rèn)準(zhǔn)：https://webpack.docschina.org
文檔地址請認(rèn)準(zhǔn)：https://webpack.docschina.org
重要的事說三遍，我們的文檔隸屬于官方，我們沒有其他的域名哦，并且是與官方進(jìn)行實(shí)時同步。
2020 年 10 月 10 日，webpack 升級至 5.0 版本，并且為官網(wǎng)添加了博客目錄。我們及時的進(jìn)行了同步，此文是我們閱讀后總結(jié)歸納的版本。話不多說開始正文。
自從 2018 年 2 月，webpack4 發(fā)布以來，webpack 就暫時沒有更進(jìn)一步的重大更新，為了保持 API 的一致性，舊的架構(gòu)沒有做太多改變，遺留了很多的包袱。闊別 2 年多后，2020 年 10 月 10 日，webpack 5 正式發(fā)布，并帶來了諸多重大的變更，將會使前端工程師的構(gòu)建效率與質(zhì)量大為提升。
本次重大發(fā)布的整體發(fā)展方向如下：
嘗試用持久性緩存來提高構(gòu)建性能。 嘗試用更好的算法和默認(rèn)值來改進(jìn)長期緩存。 嘗試用更好的 Tree Shaking 和代碼生成來改善包大小。 嘗試改善與網(wǎng)絡(luò)平臺的兼容性。 嘗試在不引入任何破壞性變化的情況下， 清理那些在實(shí)現(xiàn) v4 功能時處于奇怪狀態(tài)的內(nèi)部結(jié)構(gòu)。 試圖通過現(xiàn)在引入突破性的變化來為未來的功能做準(zhǔn)備， 盡可能長時間地保持在 v5 版本上。
webpack 5 的 Release Note 非常長，本文嘗試摘出最簡練的信息。
功能清除
清理已棄用的功能
所有在 webpack 4 標(biāo)記即將過期的功能，都已在該版移除。因此在遷移到 webpack 5 之前，請確保你在 webpack 4 運(yùn)行的構(gòu)建不會有任何的功能過期警告。
不再為 Node.js 模塊 自動引用 Polyfills
不再為 Node.js 內(nèi)置模塊自動添加 Polyfills。任何項(xiàng)目中有引用 Node.js 內(nèi)置模塊，在 webpack 4 或之前的版本中會自動添加 Polyfills。但 webpack 5 將不會再這樣做，webpack會投入更多的精力到前端模塊的兼容性工作中。
如果你的代碼中有引用這些 Node.js 的模塊，要升級到 webpack 5, 將盡量使用前端的模塊，或者自行手動添加適合的 Polyfills。
而針對那些類庫的開發(fā)者，請?jiān)?package.json 中定義 browser 字段，使類庫在前端能適用。
針對長期緩存的優(yōu)化
確定的 Chunk、模塊 ID 和導(dǎo)出名稱
新增了長期緩存的算法。這些算法在生產(chǎn)模式下是默認(rèn)啟用的。
chunkIds: "deterministic"moduleIds: "deterministic"mangleExports: "deterministic"
該算法以確定性的方式為模塊和分塊分配短的（3 或 5 位）數(shù)字 ID，這是包大小和長期緩存之間的一種權(quán)衡。由于這些配置將使用確定的 ID 和名稱，這意味著生成的緩存失效不再更頻繁。
真正的內(nèi)容哈希
當(dāng)使用[contenthash]時，Webpack 5 將使用真正的文件內(nèi)容哈希值。之前它 "只 "使用內(nèi)部結(jié)構(gòu)的哈希值。當(dāng)只有注釋被修改或變量被重命名時，這對長期緩存會有積極影響。這些變化在壓縮后是不可見的。
更好的開發(fā)支持
命名代碼塊 ID
在開發(fā)模式下，默認(rèn)啟用的新命名代碼塊 ID 算法為模塊（和文件名）提供了人類可讀的名稱。模塊 ID 由其路徑?jīng)Q定，相對于 context。代碼塊 ID 由代碼塊的內(nèi)容決定。
所以你不再需要使用import(/* webpackChunkName: "name" */ "module")來調(diào)試。但如果你想控制生產(chǎn)環(huán)境的文件名，還是有意義的。
可以在生產(chǎn)環(huán)境中使用 chunkIds: "named" 在生產(chǎn)環(huán)境中使用，但要確保不要不小心暴露模塊名的敏感信息。
遷移：如果你不喜歡在開發(fā)中改變文件名，你可以通過 chunkIds: "natural" 來使用舊的數(shù)字模式。
模塊聯(lián)邦
Webpack 5 增加了一個新的功能 "模塊聯(lián)邦"，它允許多個 webpack 構(gòu)建一起工作。從運(yùn)行時的角度來看，多個構(gòu)建的模塊將表現(xiàn)得像一個巨大的連接模塊圖。從開發(fā)者的角度來看，模塊可以從指定的遠(yuǎn)程構(gòu)建中導(dǎo)入，并以最小的限制來使用。
支持嶄新的 Web 平臺功能
對于 Web 平臺的的一些支持 ，Webpack 5 也做了更好的完善更新。
JSON 模塊
比如對 JSON 模塊，會與現(xiàn)在的提案保持一致，并且要求進(jìn)行默認(rèn)的導(dǎo)出，否則會有警告信息。即使使用默認(rèn)導(dǎo)出，未使用的屬性也會被 optimization.usedExports 優(yōu)化丟棄，屬性會被 optimization.mangleExports 優(yōu)化打亂。
如果想用自定義的 JSON 解析器，可以在 Rule.parser.parse 中指定一個自定義的 JSON 解析器來導(dǎo)入類似 JSON 的文件（例如針對 toml、yaml、json5 等）。
資源模塊
Webpack 5 現(xiàn)在已經(jīng)對表示資源的模塊提供了內(nèi)置支持。這些模塊可以向輸出文件夾發(fā)送一個文件，或者向 javascript 包注入一個 DataURI。無論哪種方式，它們都會給出一個 URL 來工作。
它們可以通過多種方式被使用：
import url from "./image.png"和 在module.rule中設(shè)置type: "asset"當(dāng)匹配這樣的導(dǎo)入時。(老方法)new URL("./image.png", import.meta.url)(新方式)
選擇 "新的方式 "語法是為了允許在沒有打包工具的情況下運(yùn)行代碼。這種語法也可以在瀏覽器中的原生 ECMAScript 模塊中使用。
原生 Worker 支持
當(dāng)把資源的 new URL 和 new Worker/new SharedWorker/navigator.serviceWorker.register 結(jié)合起來時，webpack 會自動為 web worker 創(chuàng)建一個新的入口點(diǎn)（entrypoint）。
new Worker(new URL("./worker.js", import.meta.url))
選擇這種語法也是為了允許在沒有打包工具的情況下運(yùn)行代碼。這種語法在瀏覽器的原生 ECMAScript 模塊中也可以使用。
URIs
Webpack 5 支持在請求中處理協(xié)議。
支持 data:。支持 Base64 或原始編碼。Mimetype 可以在module.rule中被映射到加載器和模塊類型。例如：import x from "data:text/javascript,export default 42"。支持 file:。支持 http(s):，但需要通過new webpack.experiments.s schemesHttp(s)UriPlugin()選擇加入。默認(rèn)情況下，當(dāng)目標(biāo)為 "web "時，這些 URI 會導(dǎo)致對外部資源的請求（它們是外部資源）。
支持請求中的片段。例如：./file.js#fragment。
異步模塊
Webpack 5 支持所謂的 "異步模塊"。這些模塊并不是同步解析的，而是基于異步和 Promise 的。
通過 "import "導(dǎo)入它們會被自動處理，不需要額外的語法，而且?guī)缀蹩床怀鰠^(qū)別。
通過require()導(dǎo)入它們會返回一個解析到導(dǎo)出的 Promise。
在 webpack 中，有多種方式來擁有異步模塊。
異步的外部資源(async externals) 新規(guī)范中的 WebAssembly 模塊 使用頂層 Await 的 ECMAScript 模塊。
外部資源
Webpack 5 增加了更多的外部類型來覆蓋更多的應(yīng)用：
promise: 一個評估為 Promise 的表達(dá)式。外部模塊是一個異步模塊，解析值作為模塊導(dǎo)出使用。
import。原生的 import() 用于加載指定的請求，外部模塊是一個異步模塊，解析值作為模塊導(dǎo)出。外部模塊是一個異步模塊。
module: 尚未實(shí)現(xiàn)，但計(jì)劃通過 import x from "..." 加載模塊。
script: 通過