webpack 4 於 2018 年 2 月發布，之後到現在雖然更新了很多功能，但沒有重大更改。我們知道開發者不喜歡帶很多重大更改的大版本。尤其是使用 webpack 時，開發者通常每年只「碰」它兩次，而剩下的時間 webpack 「就在那兒工作」。但是交付功能時不做重大更改是需要付出代價的：我們無法進行主要的 API 或架構改進。
該來的總是要來的，為了避免混亂，我們被迫進行重大更改。而現在是時候推出新的主要版本了。因此 webpack 5 包含了一眾架構改進和得益於新架構的特性。
這個新的大版本還讓我們有機會修改一些默認設置，並與近期新提出的提案和規範保持一致。
所以 webpack 5.0.0 發布了，但這並不意味著它已經完成、沒有錯誤，甚至也不等於功能都完善好了。與 webpack 4 一樣，我們會繼續開發下去，不斷修復問題和添加功能。在接下來的幾天中可能會有很多錯誤修正。還有一些功能將稍後發布。
這意味著我們完成了重大更改。我們進行了許多重構，以升級架構並為將來的功能（和當前功能）奠定良好的基礎。
看具體情況。升級很有可能失敗，你可能要試兩三次。如果你願意這樣做，請立即嘗試升級並向 webpack、插件和加載程序提供反饋。我們希望儘快解決這些問題。總有人要邁出第一步，你將是最早從中受益的人之一。
此版本重點關注以下內容：
通過持久緩存提高構建性能。
使用更好的算法和默認值來改善長期緩存。
通過更好的 Tree Shacking 和代碼生成來改善包大小。
改善與 web 平臺的兼容性。
在 v4 中實施的一些功能沒有引入重大更改，導致了一些怪異的內部結構，現在要清理掉。
現在就引入一些重大更改為將來的功能做準備，使我們能夠儘可能長時間地停留在 v5 上。
見此連結：
https://webpack.js.org/migrate/5
v4 中棄用的所有項目均已移除。
遷移：確保你的項目不包含 webpack 4 中已經 Warning 的功能。
以下是一些已移除但在 v4 中沒有棄用警告的內容：
新的棄用包括棄用代碼，因此更易於引用。
require.include 已棄用，使用時默認會發出警告。
可以使用 Rule.parser.requireInclude 將行為更改為 allowed, deprecated 或 disabled。
早期，webpack 的目標是允許在瀏覽器中運行大多數 Node.js 模塊，但是模塊格局已經發生了很大變化，現在許多模塊主要是出於前端目的編寫的。webpack<=4 附帶了許多 Node.js 核心模塊的 polyfills，一旦一個模塊使用任何核心模塊（如 crypto 模塊），這些 polyfills 就會自動應用。
雖然這讓為 Node.js 編寫的模塊用起來更方便，但它會將這些巨大的 polyfill 添加到包中。在許多情況下，這些 polyfills 是不必要的。
webpack 5 會停止自動 polyfilling 這些核心模塊，並專注於與前端兼容的模塊。我們的目標是提高與 web 平臺的兼容性，而在 web 平臺上 Node.js 核心模塊不可用。
遷移：
新版添加了用於長期緩存的一些新算法，在生產模式下默認啟用。
chunkIds: "deterministic" moduleIds: "deterministic" mangleExports: "deterministic"
該算法以確定性方式為模塊和塊分配短（3 或 5 位數字）數字 ID，並為導出分配短（2 個字符）名稱。這是包大小和長期緩存之間的折衷方案。
moduleIds/chunkIds/mangleExports: false 禁用默認行為，並且可以通過插件提供自定義算法。請注意，在 webpack 4 中，moduleIds/chunkIds: false（不帶自定義插件）會正常構建，而在 webpack 5 中你必須提供自定義插件。
遷移：最好使用 chunkIds、moduleIds 和 mangleExports 的默認值。你還可以選擇使用舊的默認 chunkIds: "size", moduleIds: "size", mangleExports: "size"，這將生成較小的包，但會為了緩存而更頻繁使它們無效化。
注意：在 webpack 4 中，哈希過的模塊 ID 導致 gzip 性能降低。這與更改的模塊順序有關，並且已得到修復。
注意：在 webpack 5 中，默認情況下在生產模式下啟用 deterministic ID。
現在，當使用 [contenthash] 時，webpack 5 將使用文件內容的真實哈希。在此之前「僅」使用內部結構的哈希。當僅更改注釋或重命名變量時，這可能對長期緩存產生積極影響。包縮小後，這些更改不可見。
在開發模式下默認啟用的新命名塊 ID（named chunk id）算法為塊（和文件名）提供了易於理解的名稱。模塊 ID 由其相對於 context 的路徑確定。塊 ID 由塊的內容確定。
因此，你不再需要使用 import(/* webpackChunkName: "name" */ "module") 進行調試。但如果要控制生產環境的文件名，這還是有用的。
可以在生產環境中使用 chunkIds:"named"，但請確保不要意外地洩露有關模塊名稱的敏感信息。
遷移：如果你不喜歡在開發中更改文件名，則可以傳遞 chunkIds:"natural"以使用舊的數字模式。
webpack 5 添加了一個稱為「模塊聯盟」（Module Federation）的新功能，允許多個 webpack 構建協同工作。從運行時的角度來看，來自多個構建的模塊的行為就像一個巨大的互聯模塊圖。從開發人員的角度來看，可以從指定的遠程構建中導入模塊，並以最少的限制使用它們。
更多詳細信息請見該指南：
https://webpack.js.org/concepts/module-federation
JSON 模塊現在與提案保持一致，並在使用非默認導出時發出警告。從嚴格的 ECMAScript 模塊導入時，JSON 模塊不再有命名導出。
遷移：使用默認導出。
即使在使用默認導出時，optimization.usedExports 優化也會移除未使用的屬性，而 optimization.mangleExports 優化會破壞屬性。
可以在 Rule.parser.parse 中指定自定義 JSON 解析器，以導入類似 JSON 的文件（例如 toml、yaml、json5 等）。
import.meta.webpackHot 是 module.hot 的別名，在嚴格的 ESM 中也可用
import.meta.webpack 是 webpack 的主要版本，數字表示
import.meta.url 是當前文件的 file: url（類似 __filename，但作為文件 url）
webpack 5 現在對表示資產的模塊提供原生支持。這些模塊會將文件發射到輸出文件夾中，或者將 DataURI 注入到 JavaScript 包中。無論哪種方式，它們都提供了可使用的 URL。
它們可以通過多種方式使用：
匹配此類導入時，import url from "./image.png"，並在 module.rules 中設置 type: "asset"。（舊方法）
new URL("./image.png", import.meta.url)（新方法）
新方法也允許運行沒有打包程序的代碼。此語法在瀏覽器的原生 ECMAScript 模塊中也可用。
將資產的 new URL 與 new Worker/newSharedWorker/navigator.serviceWorker.register 結合使用時，webpack 會自動為 webWorker 創建一個新的入口點。
new Worker(new URL("./worker.js", import.meta.url))
選擇該語法以允許運行代碼時無需打包程序。此語法在瀏覽器的原生 ECMAScript 模塊中也可用。
webpack 5 支持處理請求中的協議。
支持 data: 。支持 Base64 或原始編碼。Mimetype 可以映射到 module.rules 中的加載程序和模塊類型。示例：import x from "data:text/javascript,export default 42"
支持 file: 。
支持 http(s): ，但需要通過 new webpack.experiments.schemesHttp(s)UriPlugin() 啟用
支持請求中的 fragment，示例：./file.js#fragment
webpack 5 支持所謂的「async 模塊」。這些模塊不會同步執行，而是異步和基於 Promise 的模塊。
通過 import 可以自動導入它們，並且不需要其他語法，和之前幾乎沒有差異。
通過 require() 導入它們將返回一個解析為導出的 Promise。
在 webpack 中，有多種方式來擁有 async 模塊：
webpack 5 添加了更多外部類型以覆蓋更多應用程式：
promise：表示為 Promise 的表達式。該外部模塊是 async 模塊，解析值用作模塊導出。
import：原生 import() 用於加載指定的請求。該外部模塊是 async 模塊。
module：尚未實現，但計劃通過 import x from "..."加載模塊。
script：通過<script>標籤來加載 url，並從全局變量（及其可選屬性）獲取導出。該外部模塊是 async 模塊。
現在支持 package.json 中的 exports 和 imports 欄位。
原生支持 Yarn PnP。
更多信息見:
https://webpack.js.org/guides/package-exports/
webpack 5 允許傳遞目標列表，並且還支持目標版本。
示例：target: "node14" target: ["web", "es2020"]
這是提供 webpack 確定以下內容所需所有信息的簡單方法：
Stats 測試格式改進了可讀性和簡潔性。改進了默認值來簡化內容，也適用於大型構建。
塊關係被默認隱藏。可以使用 stats.chunkRelations 切換。
Stats 現在可以區分 files 和 auxiliary Files。
Stats 現在默認隱藏模塊和塊 ID。可以使用 stats.ids 切換。
現在，所有模塊的列表按到入口點的距離排序。可以使用 stats.modulesSort 更改。
塊模塊列表現在按模塊名稱排序。可以使用 stats.chunkModulesSort 更改。
串聯模塊中的嵌套模塊列表現在按拓撲排序。可以使用 stats.nestedModulesSort 更改。
塊和資產現在顯示塊 ID 提示。
資產和模塊將顯示在樹中，而不是列表 / 表中。
一般信息顯示在末尾的摘要中，包含 webpack 版本、配置名稱和警告 / 錯誤計數。
哈希默認隱藏。可以使用 stats.hash 更改。
默認不再顯示構建時間戳。可以使用 stats.builtAt 啟用它。它將在摘要中顯示時間戳。
默認不再顯示子編譯。可以用 stats.children 顯示。
對 CLI 用於 --progress 的 ProgressPlugin 進行了一些改進，但也可以手動用作插件。
之前它僅用於計數已處理的模塊。現在，它可以計數 entries、dependencies 和 modules。現在這些都默認顯示。
之前它用於顯示當前處理的模塊。這導致很多 stderr 輸出，並在某些控制臺上產生了性能問題。現在默認禁用此功能（activeModules 選項）。這也減少了控制臺上的垃圾信息數量。現在，在構建模塊期間寫入 stderr 的速度限制為 500ms。
profiling 模式也得到了升級，將顯示嵌套進度消息的計時。這樣在插件引起性能問題時更容易找出原因。
新添加的 percentBy 選項告訴 ProgressPlugin 如何計算進度百分比。new webpack.ProgressPlugin({ percentBy: 'entries' });
為了讓進度百分比更加準確，ProgressPlugin 緩存了最後一個已知的總模塊數，並在下一個構建中重用此值。第一個構建將預熱緩存，隨後的構建將使用並更新此值。
在 webpack 4 中，多個 webpack 運行時可能在同一 HTML 頁面上發生衝突，因為它們使用相同的全局變量進行塊加載。為了解決這個問題，需要為 output.jsonpFunction 配置提供自定義名稱。
webpack 5 會從 package.json 名稱自動推斷出構建的唯一名稱，並將其用作 output.uniqueName 的默認名稱。
此值用來使所有可能出現潛在衝突的全局變量唯一化。
遷移：移除 output.jsonpFunction，以便在 package.json 中使用唯一名稱。
webpack 5 將在可能的情況下自動確定 output.publicPath。
webpack 5 從原始碼生成 typescript 類型，並通過 npm 包公開它們。
遷移：移除 @types/webpack。名稱不同時會更新引用。
webpack 現在能夠跟蹤對導出的嵌套屬性的訪問。重新導出名稱空間對象時，這可以改善搖樹優化（清除未使用的導出和導出縮小）。// inner.js
export const a = 1;
export const b = 2;
// module.js
export * as inner from './inner';
// or import * as inner from './inner'; export { inner };
// user.js
import * as module from './module';
console.log(module.inner.a);
在此示例中，可以在生產模式下移除導出 b。
webpack 4 並未分析模塊導出和導入之間的依賴關係。webpack 5 有一個新的選項 optimization.innerGraph，它在生產模式下默認啟用，對模塊中的符號進行分析以找出從導出到導入的依賴性。
import { something } from './something';
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
內部圖算法將確定僅在使用 test 導出時才使用 something。這允許將更多導出標誌為未使用，並從包中省略更多代碼。如果設置了"sideEffects": false，則可以省略更多模塊。在此示例中，當未使用 test 導出時，./something 將被省略。
要獲取有關未使用的導出的信息，optimization.unusedExports 是必需的。要移除無副作用的模塊，需要 optimization.sideEffects。
可以分析以下符號：
反饋：如果你發現此分析中缺少某些內容，請報告問題，我們考慮將其添加進去。
使用 eval() 可以對模塊 bail-out 這種優化，因為 evaled 的代碼可以引用作用域中的任何符號。
此優化也稱為深度作用域分析。
webpack 以前會對 CommonJs 導出和 require() 調用退出已使用導出分析。
webpack 5 增加了對某些 CommonJs 構造的支持，允許消除未使用的 CommonJs 導出，並從 require() 調用中跟蹤引用的導出名稱。
支持以下構造：
exports|this|module.exports.xxx = ...
exports|this|module.exports = require("...") (reexport)
exports|this|module.exports.xxx = require("...").xxx (reexport)
Object.defineProperty(exports|this|module.exports, "xxx", ...)
require("abc").xxx
require("abc").xxx()
importing from ESM
require() a ESM
flagged exportType (special handling for non-strict ESM import):
Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })
exports|this|module.exports.__esModule = true|!0
計劃將來支持更多構造
當檢測到無法分析的代碼時，webpack 會 bail out，並且完全不會跟蹤這些模塊的導出信息（出於性能原因）。
package.json 中的「sideEffects」標誌允許將模塊手動標記為無副作用，從而在不使用它們時將其移除。
webpack 5 還可以根據對原始碼的靜態分析，自動將模塊標記為無副作用。
webpack 5 現在能夠（並且默認）對每個運行時分析和優化模塊（運行時通常等於入口點）。這就可以只在真正需要它們的這些入口點中導出。入口點不會互相影響（只要每個入口點使用一個運行時）
模塊串聯（Module Concatenation）還可以對每個運行時使用，以允許每個運行時進行不同的串聯。
模塊串聯已成為一等公民，現在允許任何模塊和依賴項來實現它。webpack 5 已經添加了對 ExternalModules 和 json 模塊的支持，可能很快就會發布更多支持。
export * 已改進，可以跟蹤更多信息，並且不再將 default 導出標誌為已使用。
當 webpack 確定存在衝突的導出時，export * 現在將顯示警告。
import() 允許通過 /* webpackExports: ["abc", "default"] */ 魔術注釋來手動搖樹模塊。
我們試圖提高兩種模式之間的相似性，在開發模式下的構建性能與避免僅在生產環境中出現的問題之間找到一個良好的平衡。
webpack 5 默認在兩種模式下都啟用 sideEffects 優化。在 webpack 4 中，由於 package.json 中的「sideEffects」標誌不正確，此優化導致了一些僅出現在生產的錯誤。在開發中啟用此優化可以更快、更輕鬆地發現這些問題。
在許多情況下，開發和生產都在具有不同文件大小寫敏感性的 OS 上進行，因此當出現奇怪的情況時，webpack 5 會添加更多警告 / 錯誤。
webpack 會檢測何時發生 ASI，並且在未插入分號時會生成較短的代碼。Object(...) -> (0, ...)
webpack 將多個導出 getter 合併為一個運行時函數調用：r.d(x, "a", () => a); r.d(x, "b", () => b); -> r.d(x, {a: () => a, b: () => b});
現在在 output.environment 中還有額外選項，允許指定哪些 ECMAScript 特性可用於 webpack 生成的運行時代碼。
通常不直接指定此選項，而是使用 target 選項。
webpack 4 只會發出 ES5 代碼。webpack 5 現在可以生成 ES5 和 ES6/ES2015 代碼。
僅支持現代瀏覽器將使用箭頭函數生成較短的代碼，並使用帶有 TDZ 的 const 聲明（export default）生成更多符合規範的代碼。
在 webpack 4 中，target 只有「web」和「node」（以及其他一些）粗略選項。webpack 5 在這裡為你提供更多選擇。
現在，target 選項對生成代碼的影響比以前更多：
塊加載方法
塊的格式
wasm 裝載方法
worker 中的塊和 wasm 加載方法
使用的全局對象
是否應該自動確定 publicPath
生成的代碼中使用的 ECMAScript 特性 / 語法
默認啟用 externals
一些 Node.js 兼容層的行為（global、filename、dirname）
模塊解析（browser 欄位、exports 和 imports 條件）
一些加載程序可能會基於此更改行為
對於某些內容來說，"web"和"node"這倆選項太粗略了，我們需要更多信息。因此，我們允許指定最低版本，例如「node10.13」，並推斷有關目標環境的更多屬性。
現在還可以將多個目標組合為一個數組，webpack 將確定所有目標的最小屬性。當使用無法提供完整信息，例如「web」或「node」（無版本號）的目標時，數組也很有用。例如 [「web」, 「es2020」] 結合了這兩個部分目標。
有一個目標"browserlist"，它將使用瀏覽器列表數據來確定環境的屬性。當項目中有可用的 browserslist 配置時，默認也會使用此目標。如果沒有此類配置可用，則默認將使用「web」目標。
某些組合和特性尚未實現，將導致錯誤。它們是將來特性的準備。例如：
["web", "node"] 將引向一種通用的塊加載方法，該方法尚未實現
["web", "node"] + output.module: true 將導致一種模塊塊加載方法，該方法尚未實現
"web"將導致 http(s): 導入被視為尚未實現的 module externals（解決方案：externalsPresets: { web: false, webAsync: true }，使用 import() 代替。）
現在模塊大小不再只用一個數字來表示了。現在有了不同類型的大小表示。
現在 SplitChunksPlugin 知道如何處理這些格式，並將它們用於 minSize 和 maxSize。默認情況下僅處理 javascript 格式，但是你現在可以傳遞多個值來管理它們：module.exports = {
optimization: {
splitChunks: {
minSize: {
javascript: 30000,
webassembly: 50000,
}
}
}
};
你仍然可以使用單個數字表示大小。在這種情況下，webpack 將自動使用默認大小類型。mini-css-extract-plugin 使用 css/mini-extra 作為大小類型，並自動將此大小類型添加到默認類型。
module.exports = {
cache: {
// 1. Set cache type to filesystem
type: 'filesystem',
buildDependencies: {
// 2. Add your config as buildDependency to get cache invalidation on config change
config: [__filename]
// 3. If you have other things the build depends on you can add them here
// Note that webpack, loaders and all modules referenced from your config are automatically added
}
}
};
重要提示：
默認情況下，webpack 假定 webpack 所在的 node_modules 目錄僅由 包管理器修改。對於 node_modules，將跳過哈希和時間戳。相反，出於性能原因僅使用包名稱和版本。符號連結（即 npm/yarn 連結）只要 resolve.symlinks: false 未指定即可（但也儘量不要這麼做）。除非你選擇使用 snapshot.managedPaths: [] 退出此優化，否則請不要直接在 node_modules 中編輯文件。使用 Yarn PnP webpack 時，假定 yarn 緩存是不可變的（通常是不變的）。你可以通過 snapshot.immutablePaths: [] 退出此優化。
緩存將默認存儲在 node_modules/.cache/webpack 中（使用 node_modules 時），或.yarn/.cache/webpack 中（使用 Yarn PnP 時）。當所有插件正確處理緩存時，你可能不必手動移除它。
許多內部插件也使用持久緩存。示例：SourceMapDevToolPlugin（用於緩存 SourceMap 生成）或 ProgressPlugin（用於緩存模塊數量）
持久緩存將根據使用情況自動創建多個緩存文件，以優化對緩存的讀寫訪問。
默認情況下，時間戳將在開發模式下用於快照，而在生產模式下用於文件哈希。文件哈希也允許在 CI 上使用持久緩存。
現在需要在使用編譯器後將其關閉。編譯器現在進入和離開空閒狀態，並具有這些狀態的 hooks。插件可以使用這些 hooks 執行不重要的工作。（如，持久緩存慢慢緩存到磁碟）。編譯器關閉時，所有剩餘工作應儘快完成。一個回調會表示關閉已完成。
插件及其作者應該期望某些用戶可能會忘記關閉編譯器。因此，所有工作最終也應該在空閒時完成。當工作完成時，應防止進程退出。
傳遞迴調時，webpack() 會自動調用 close。
遷移：使用 Node.js API 時，請確保在完成後調用 Compiler.close。
webpack 過去總是在第一個構建期間發出所有輸出文件，但是在增量（監視）構建期間跳過寫入未更改的文件。這裡假定在運行 webpack 時沒有其他東西更改輸出文件。
加入持久緩存後，即使重新啟動 webpack 進程也應獲得類似監視的體驗，但是如果認為即使 webpack 不運行，也沒有其他東西更改輸出目錄，這就會是一個太強的假設。
因此，webpack 現在將檢查輸出目錄中的現有文件，並將其內容與內存中的輸出文件對比。僅在更改文件後才寫入文件。這僅在首次構建時完成。在運行中的 webpack 進程中生成新資產時，任何增量構建都將始終寫入文件。
我們假設 webpack 和插件僅在內容已更改時才生成新資產。緩存應該用於確保輸入相等時不會生成新資產。不遵循此建議將降低性能。
當存在具有相同名稱的文件時，將永遠不會寫入標誌為 [immutable]（包括內容哈希）的文件。我們假設當文件內容更改時，內容哈希也將更改。一般而言這是正確的，但在 webpack 或插件開發期間可能並不總是如此。
現在，僅允許啟動單個文件的目標（如 node、webWorker、electron main）支持在運行時自動加載引導所需的依賴項。
這允許將 opimization.splitChunks 用於具有 chunks: "all"以及 optimization.runtimeChunk 的這些目標。
請注意，對於塊加載異步的目標，這會使初始評估也異步。使用 output.library 時這可能是一個問題，因為導出的值現在是一個 Promise。
Enhanced-Resolve 已更新至 v5，具有以下改進：
不包含 JS 代碼的塊將不再生成 JS 文件。這允許生成僅包含 CSS 的塊。
並非所有特性從一開始就是穩定的。在 webpack 4 中，我們添加了一些實驗特性，並在更改日誌中指出它們是實驗性的。但是從配置中並不總是能清楚表明這些功能是實驗性的。
在 webpack 5 中有一個新的 experiments 配置選項，允許啟用實驗特性。這樣可以清楚知道啟用 / 使用了哪些特性。
儘管 webpack 遵循語義版本控制，但實驗特性會是例外。實驗特性可能包含次要 webpack 版本中的重大更改。發生這種情況時，我們將在更改日誌中添加清晰的注釋。這將使我們能夠更快地迭代實驗特性，同時還能讓我們在主要版本上停留更長時間以獲得穩定的特性。
以下實驗特性將隨 webpack 5 一起提供：
webpack 4（experiments.syncwebAssembly）中的舊 WebAssembly 支持
根據更新規範（experiments.asyncwebAssembly）的新 WebAssembly 支持
頂級 await 階段 3 提案（experiments.topLevelAwait）
將包作為模塊發出（experiments.outputModule）
請注意，這還意味著現在默認禁用 WebAssembly 支持。
支持的最低 Node.js 版本已從 6 增加到 10.13.0（LTS）。
遷移：升級到可用的最新 Node.js 版本。
entry: {}現在允許使用空對象（以允許使用插件添加 entry）
target 支持數組、版本和瀏覽器列表
cache: Object 已移除：不再可以設置為內存緩存對象
添加了 cache.type：現在可以在"memory"和"filesystem"之間選擇
添加了 cache.type = "filesystem"的新配置選項：
添加了 snapshot.resolveBuildDependencies
添加了 snapshot.resolve
添加了 snapshot.module
添加了 snapshot.managedPaths
添加了 snapshot.immutablePaths
添加了 resolve.cache：允許禁用 / 啟用安全的解析緩存
resolve.concord 已移除
resolve.alias 值現在可以是數組或 false
添加了 resolve.restrictions：允許限制潛在的解析結果
添加了 resolve.fallback：允許為解析失敗的請求添加別名
添加了 resolve.preferRelative：允許解析模塊請求也是相對請求
用於原生 Node.js 模塊的自動 polyfill 已移除
output.filename 現在可以是一個函數
添加了 output.assetModuleFilename
將 output.jsonpScriptType 重命名為 output.scriptType
devtool 更嚴格
添加了 optimization.chunkIds: "deterministic"
添加了 optimization.moduleIds: "deterministic"
optimization.moduleIds: "hashed"已棄用
optimization.moduleIds: "total-size"已移除
移除了模塊和塊 ID 的棄用標誌
optimization.hashedModuleIds 已移除
optimization.namedChunks 已移除（還有 NamedChunksPlugin）
optimization.namedModules 已移除（還有 NamedModulesPlugin）
optimization.occurrenceOrder 已移除
遷移：使用 chunkIds 和 moduleIds
optimization.splitChunks test 不再匹配塊名稱
遷移：使用測試函數 (module, { chunkGraph }) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name")
添加了 optimization.splitChunks minRemainingSize
optimization.splitChunks filename 現在可以是一個函數
optimization.splitChunks 的大小現在可以是具有源類型的對象
minSize
minRemainingSize
maxSize
maxAsyncSize
maxInitialSize
maxSize 旁邊添加了 optimization.splitChunks maxAsyncSize 和 maxInitialSize：允許為初始塊和異步塊指定不同的 max size
optimization.splitChunks name: true 移除：不再支持自動名稱
添加了 optimization.splitChunks.cacheGroups[].idHint：提示如何選擇命名的塊 ID
optimization.splitChunks automaticNamePrefix 已移除
optimization.splitChunks filename 不再限制為初始塊
添加了 optimization.splitChunks usedExports，以在對比模塊時包括使用的導出
添加了 optimization.splitChunks.defaultSizeTypes：在將數字用作大小時指定大小類型
添加了 optimization.mangleExports
optimization.minimizer "..."可用於引用默認值
添加了 optimization.usedExports "global"值，以允許禁用按每個運行時分析，改為全局進行分析（性能更高）
optimization.noEmitOnErrors 重命名為 optimization.emitOnErrors，邏輯倒置
添加了 optimization.realContentHash
output.devtoolLineToLine 已移除
output.chunkFilename: Function 現在被允許
output.hotUpdateChunkFilename: Function 現在禁止使用：一直都沒法用。
output.hotUpdateMainFilename: Function 現在禁止使用：一直都沒法用。
output.importFunctionName: string 指定用於替換 import() 的名稱，以允許在非支持環境中 polyfilling。
添加了 output.charset：將其設置為 false 忽略腳本標籤上的 charset 屬性
將 output.hotUpdateFunction 重命名為 output.hotUpdateGlobal
將 output.jsonpFunction 重命名為 output.chunkLoadingGlobal
output.chunkCallbackFunction 重命名為 output.chunkLoadingGlobal
添加了 output.chunkLoading
添加了 output.enabledChunkLoadingTypes
添加了 output.chunkFormat
module.rules resolve 和 parser 將以不同的方式合併（對象已深度合併，數組可能包含" ..."以引用上一個值）
添加了 module.rules parser.worker：允許配置支持的 worker
module.rules query 和 loaders 已移除
傳遞字符串的 module.rules option 已棄用
添加了 module.rules mimetype：允許匹配 DataURI 的 mimetype
添加了 module.rules descriptionData：允許匹配 package.json 中的數據
module.defaultRules " ..."可用於引用默認值
添加了 stats.chunkRootModules：顯示塊的根模塊
添加了 stats.orphanModules：顯示未發出的模塊
添加了 stats.runtime：顯示運行時模塊
添加了 stats.chunk Relations：顯示父 / 子 / 兄弟塊
添加了 stats.errorStack：顯示 webpack- internal 堆棧中的錯誤跟蹤
添加了 stats.preset：選擇一個預設
添加了 stats.relatedAssets：顯示與其他資產相關的資產（例如 SourceMaps）
stats.warningsFilter 已棄用，改為 ignoreWarnings
BannerPlugin.banner 籤名已更改
data.basename 已移除
data.query 已移除
遷移：從 filename 中提取
SourceMapDevToolPlugin lineToLine 已移除
[hash] 作為完整編譯的哈希已棄用
[modulehash] 已棄用
[moduleid] 已棄用
[filebase] 已移除
基於文件的模板的新佔位符（如 SourceMapDevToolPlugin）
傳遞函數時的 externals，現在有不同的籤名 ({ context, request }, callback)
添加了 externals Presets
添加了 experiments（請參見上面的實驗部分）
添加了 watchOptions.followSymlinks
watchOptions.ignored 現在可以是一個 RegExp
webpack.util.serialization 現在公開。
當瀏覽器列表配置可用時，target 現在默認是"browserlist"
現在默認僅對 node_modules 啟用 module.unsafeCache
optimization.moduleIds 在生產模式下默認為 deterministic，而不是 size
optimization.chunkIds 在生產模式下默認為 deterministic，而不是 total-size
optimization.nodeEnv 在 none 模式下默認為 false
optimization.splitChunks.minSize 在生產中默認為 20k
optimization.splitChunks.enforceSizeThreshold 在生產中默認為 50k
optimization.splitChunks minRemainingSize 默認為 minSize
optimization.splitChunks maxAsyncRequests 和 maxInitialRequests 的默認值已增加到 30
optimization.splitChunks.cacheGroups.vendors 已重命名為 optimization.splitChunks.cacheGroups.defaultVendors
optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk 現在默認為 true
terser 選項下，optimization.minimizer 目標默認使用 compress.passes: 2
使用 cache 時 resolve(Loader).cache 默認為 true
resolve(Loader).cacheWithContext 默認為 false
resolveLoader.extensions 移除.json
node.global node.filename 和 node. dirname 在 node- target s 中默認為 false
stats.errorStack 默認為 false
這個新的 API 應能簡化 loader 中選項的用法。它允許傳遞 JSON 模式進行驗證。詳見：
https://github.com/webpack/webpack/pull/10017
已從 loader 上下文中移除
遷移：這可以在 loader 本身中實現
loaderAPI 中的 getResolve(options) 將以不同的方式合併選項，請參見 module.rules resolve。
由於 webpack 5 在不同的 issuing 依賴之間是不同的，因此可以將 dependencyType 作為選項傳遞（例如"esm"、"commonjs"或其他）。
以下更改僅與插件作者相關：
webpack5 中的插件將在默認配置應用前應用。這允許插件應用自己的默認值，或充當配置預設。
但這也是一個重大更改，因為插件在應用時不能依賴要設置的配置值。
遷移：僅在插件 hooks 中訪問配置。或最好完全避免訪問配置，並通過構造函數獲取選項。
運行時代碼的很大一部分已移至所謂的"運行時模塊"中。這些特殊模塊負責添加運行時代碼。可以將它們添加到任何塊中，但當前它們始終添加到運行時塊中。"Runtime Requirements"控制將哪些運行時模塊（或核心運行時部件）添加到包中。這樣可以確保僅將用到的運行時代碼添加到包中。將來，還可以將運行時模塊添加到按需加載的塊中，以在需要時加載運行時代碼。
在大多數情況下，核心運行時允許內聯 entry 模塊，而不是使用 _webpack_require_ 對其調用。如果包中沒有其他模塊，則根本不需要 _webpack_require_。這與模塊串聯（將多個模塊串聯成一個模塊）結合得很好。
在理想情況下，根本不需要運行時代碼。
遷移：如果要將運行時代碼注入插件的 webpack 運行時中，請考慮改用 RuntimeModules。
添加了序列化機制以允許對 webpack 中的複雜對象序列化。它具有 opt-in 的語義，因此需要顯式標記應序列化的類（及其序列化實現）。對於大多數模塊、所有依賴項和某些錯誤，都已完成此操作。
遷移：使用自定義模塊或依賴項時，建議使其可序列化以受益於持久緩存。
添加了具有插件接口的 Cache 類。此類可用於寫入和讀取緩存。根據配置，不同的插件可以向緩存添加功能。MemoryCachePlugin 添加了內存中緩存。FileCachePlugin 添加了持久（文件系統）緩存。
FileCachePlugin 使用序列化機制將持久化的項目持久化到磁碟或從磁碟還原。
帶有 hooks 的類會將其 hooks 對象凍結，因此不再可以通過這種方式添加自定義 hooks。
遷移：建議添加自定義 hooks 的方法是使用 WeakMap 和靜態 getXXXHooks(XXX)（如 getCompilationHook(compilation)）方法。內部類使用與自定義 hooks 相同的機制。
webpack3 插件的 compat 層已移除。它在 webpack 4 中已棄用。
移除或棄用了一些較少使用的 tapableAPI。
遷移：使用新的 tapableAPI。
在封裝過程的幾個步驟中，有多個用於不同階段的 hooks，如 optimizeDependencies Basic optimizeDependencies 和 optimizeDependenciesAdvanced。這些已被移除，改用帶有 stage 選項的單個 hook。關於可用的 stage 值，參見 OptimizationStages。
遷移：改用剩下的 hook。你可以添加一個 stage 選項。
Main/Chunk/moduleTemplate 棄用打包模板已重構。MainTemplate/ChunkTemplate/moduleTemplate 已棄用，而 JavascriptModulesPlugin 現在可以處理 JS 模板。
在這一重構之前，JS 輸出由 Main/ChunkTemplate 處理，而另一個輸出（如 WASM、CSS）由插件處理。看起來 JS 是一等，而另一個輸出是二等。重構後，所有輸出均由其插件處理。
仍然有可能 hook 進模板的各個部分。這些 hooks 現在位於 JavascriptModulesPlugin 中，而不是 Main/ChunkTemplate 中。（是的，插件也可以有 hooks。我稱它們為附加 hooks。）
有一個兼容層，因此 Main/Chunk/moduleTemplate 仍然存在，但只是將 tap 調用委派給新的 hook 位置。
遷移：請遵循棄用消息中的建議。通常指向不同位置的 hooks。
如果將對象作為入口點傳遞，則該值可能是字符串、字符串數組或描述符：module.exports = {
entry: {
catalog: {
import: './catalog.js',
}
}
};
描述符語法可用於將其他選項傳遞給入口點。
module.exports = {
entry: {
about: { import: './about.js', filename: 'pages/[name][ext]' }
}
};
module.exports = {
entry: {
app: { import: './app.js', dependOn: 'react-vendors' },
'react-vendors': ['react', 'react-dom', 'prop-types']
}
};
該應用塊將不包含 react- vendors 擁有的模塊。
module.exports = {
entry: {
commonjs: {
import: './lib.js',
library: {
type: 'commonjs-module'
}
},
amd: {
import: './lib.js',
library: {
type: 'amd'
}
}
}
};
module.exports = {
entry: {
app: {
import: './app.js',
runtime: 'app-runtime'
}
}
};
module.exports = {
entry: {
app: {
import: './app.js'
},
worker: {
import: './worker.js',
chunkLoading: 'importScripts'
}
}
};
之前 webpack 在編譯階段以特定方式對模塊和塊排序，從而按增量順序分配 ID。現在情況變了。該順序不再用於 ID 生成，而由插件完全控制 ID 生成。
優化模塊和塊順序的 hooks 已移除。
遷移：你不能再依賴編譯階段中模塊和塊的順序。
有一個兼容層，它會列印棄用警告。
遷移：使用 Set 方法而不是 Array 方法。
Compilation.fileSystemInfo可以使用這個新類以緩存的方式訪問有關文件系統的信息。當前，它允許詢問文件和目錄時間戳。如果可能，有關時間戳的信息將從監視程序傳輸，否則由文件系統訪問確定。
將來，將添加請求文件內容哈希的功能，並且模塊將能夠使用文件內容而非文件哈希來檢查有效性。
遷移：不要使用 file/contextTimestamps，而是使用 compiling.fileSystemInfoAPI。
現在可以為目錄加上時間戳，來對 ContextModules 進行序列化。
已添加 Compiler.modifiedFiles（在 Compiler.removedFiles 旁邊），便於引用更改後的文件。
在 compiler.inputFileSystem 和 compiler.outputFileSystem 旁邊，有一個新的 compiler.intermediateFileSystem，用於所有不視為輸入或輸出的文件系統動作，例如寫入記錄、緩存或分析輸出。
文件系統現在具有 fs 接口，不再需要其他方法，例如 join 或 mkdirp。但是，如果它們具有諸如 join 或 dirname 之類的方法，則會使用它們。
HMR 運行時已重構為運行時模塊。HotUpdateChunkTemplate 已合併到 ChunkTemplate。ChunkTemplates 和插件現在也應該處理 HotUpdateChunks。
HMR 運行時的 javascript 部分已與核心 HMR 運行時分離。現在，其他模塊類型也可以用自己的方式處理 HMR。將來，這將允許用於 mini-css-extract-plugin 或 WASM 模塊的 HMR。
遷移：由於這是新引入的功能，因此無需遷移。
import.meta.webpackHot 公開與 module.hot 相同的 API。這也可以從無法訪問 module 的嚴格 ESM 模塊（在 package.json 中類型為"module"的.mjs）來使用。
之前 webpack 通過調用函數的函數和限制並行性的 semaphore 來應對模塊處理。Compilation.semaphore 已移除，異步隊列現在可以處理工作隊列和處理。每個步驟都有一個單獨的隊列：
Compilation.factorizeQueue：為一組依賴項調用模塊工廠。
Compilation.addModuleQueue：將模塊添加到編譯隊列中（可以從緩存中還原模塊）。
Compilation.buildQueue：如有必要，構建模塊（可以將模塊存儲到緩存中）。
Compilation.rebuildQueue：如果手動觸發，則再次構建模塊。
Compilation.processDependenciesQueue：處理模塊的依賴項。
這些隊列有一些 hooks 來監視和攔截作業處理。
將來，多個編譯器可能會一起工作，並且可以通過攔截這些隊列來完成工作編排。
遷移：由於這是新引入的功能，因此無需遷移。
webpack internals 現在包括一些日誌記錄。stats.logging 和 InfrastructureLogging 選項可用於啟用這些消息。
之前 webpack 將解析的模塊存儲在依賴項中，並將包含的模塊存儲在塊中。現在情況變了。現在，有關模塊圖中模塊連接方式的所有信息都存儲在 ModuleGraph 類中，有關模塊與塊連接方式的所有信息都存儲在 ChunkGraph 類中。取決於塊圖之類的信息也存儲在相關類中。
這意味著以下有關模塊的信息已移除：
Module connections -> ModuleGraph
Module issuer -> ModuleGraph
Module optimization bailout -> ModuleGraph
Module usedExports -> ModuleGraph
Module providedExports -> ModuleGraph
Module pre order index -> ModuleGraph
Module post order index -> ModuleGraph
Module depth -> ModuleGraph
Module profile -> ModuleGraph
Module id -> ChunkGraph
Module hash -> ChunkGraph
Module runtime requirements -> ChunkGraph
Module is in chunk -> ChunkGraph
Module is entry in chunk -> ChunkGraph
Module is runtime module in chunk -> ChunkGraph
Chunk runtime requirements -> ChunkGraph
從緩存中還原時，以前 webpack 會從圖中斷開模塊，現在不會了。模塊不存儲有關圖的信息，並且可以在技術上用於多個圖。這改善了緩存。
這些更改大都有一個兼容層，在使用時會列印棄用警告。
遷移：使用在 ModuleGraph 和 ChunkGraph 上新的 API。
DependenciesBlockVariables 已移除，改用 InitFragments。DependencyTemplates 現在可以添加 InitFragments 來將代碼注入模塊源的頂部。InitFragments 允許重複數據移除。
遷移：使用 InitFragments，而不是插入某些負索引的內容到源中。
現在，模塊必須通過 Module.getSourceTypes() 定義其支持的源類型。因此，不同的插件會使用這些類型調用 source()。例如，對於 javascript 類型的源，JavascriptModulesPlugin 將源嵌入到包中。源類型 webassembly 將使 webAssemblyModulesPlugin 發出 wasm 文件。還支持自定義源類型，如 mini-css-extract-plugin 可能會使用源類型 stylesheet 將原始碼嵌入到 CSS 文件中。
模塊類型和源類型之間沒有關係。如，模塊類型 json 還使用源類型 javascript，模塊類型 webassembly/experimental 使用源類型 javascript 和 webassembly。
遷移：自定義模塊需要實現這些新的接口方法。
preset、default、json 和 toString 的 Stats 現在由插件系統烘培。將當前 Stats 轉換為插件。
遷移：你現在可以自定義它，而不必替換整個 Stats 功能。現在可以將其他信息添加到 stats json 中，而不用編寫單獨的文件。
webpack 使用的 watcher 已重構。它以前使用 chokidar 和原生依賴項 fsevents（僅用於 OSX）。現在，它僅基於原生 Node.js fs。這意味著 webpack 中不存在任何原生依賴。
它在監視時還會捕獲有關文件系統的更多信息。現在，它可以捕獲 mtimes 並監視事件時間，以及有關丟失文件的信息。為此，WatchFileSystemAPI 進行了一些更改。我們還將 Array 轉換為 Set，將 Object 轉換為 Map。
webpack 現在使用 SizeOnlySource 變體替換了 Compilation.assets 中的 Sources，以減少內存使用量。
警告 Multiple assets emit different content to the same filename 已改為錯誤。
重構了有關模塊導出的信息的存儲方式。現在，ModuleGraph 為每個 Module 提供一個 ExportsInfo，存儲每次導出的信息。它還存儲有關 unknown 導出的信息，以及是否以僅副作用方式使用模塊。
對於每次導出，將存儲以下信息：
是否使用 export？yes，no，not statically known，not determined。（另請參見 optimization.usedExports）
是否提供 export？yes，no，not statically known，not determined。（另請參見 optimization.providedExports）
可以重命名導出名稱嗎？yes，no，not，determined
新名稱（如果導出已重命名）。（另請參見 optimization.mangleExports）
嵌套的 ExportsInfo（如果導出是本身附加了信息的對象）
現在，編譯功能將代碼生成作為單獨的編譯階段。它不再隱藏在 Module.source() 或 Module.getRuntimeRequirements() 中運行。
這樣可以使流程更整潔。它還允許報告此階段的進度，並在分析時使「代碼生成」更加可見。
遷移：Module.source() 和 Module.getRuntimeRequirements() 已棄用，請改用 Module.codeGeneration()。
webpack 過去只有一個方法和類型來表示依賴引用（Compilation.getDependencyReference 返回 DependencyReference）。此類型曾經包括有關此引用的所有信息，例如被引用的模塊（如果是弱引用，則其導出已被導入），以及一些與順序有關的信息。
將所有這些信息打包在一起會使引用變得很大，引用頻率也會增多（每次有人需要一點信息時都會引用）。
在 webpack5 中，代碼庫的這一部分已重構，並且該方法已拆分。
可以從 ModuleGraphConnection 中讀取引用的模塊；
可以通過 Dependency.getReferencedExports() 獲取導入的導出名稱；
Dependency 類上有一個 weak 標誌；
排序僅與 HarmonyImportDependencies 相關，並且可以通過 sourceOrder 屬性獲取。
Presentational Dependencies現在，NormalModules 中有一種新的依賴類型：PresentationalDependencies
這些依賴僅在代碼生成階段使用，而在模塊圖構建期間不使用。因此，它們永遠不會引用模塊或影響導入導出。
這些依賴項的處理成本較低，並且 webpack 會儘可能使用它們。
module.exports = {
resolve: {
alias: {
xyz$: false
}
}
};
module.exports = {
resolve: {
alias: {
[path.resolve(__dirname, '....')]: false
}
}
};
https://webpack.js.org/blog/2020-10-10-webpack-5-release/#changes-to-the-structure
如果覺得不錯，素質三連、或者點個「贊」、「在看」都是對筆者莫大的支持，謝謝各位大佬啦~