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