清單

在一個典型的應用程式或網站中，使用 webpack 建置，有三大類型的程式碼

1. 您和您的團隊編寫的原始程式碼。
2. 您的原始程式碼依賴的任何第三方函式庫或「供應商」程式碼。
3. 一個 webpack 執行階段和清單，用於執行所有模組的互動。

本文將重點放在這三部分的最後一部分：執行階段，特別是清單。

執行階段

執行階段連同清單資料，是 webpack 在瀏覽器中執行時連接您的模組化應用程式的所有程式碼。它包含連接您的模組時所需的載入和解析邏輯。這包括連接已載入到瀏覽器中的模組，以及延遲載入尚未載入的模組的邏輯。

清單

您的應用程式以 index.html 檔案的形式進入瀏覽器後，必須載入並連結應用程式所需的一些套件和各種其他資源。您精心佈局的 /src 目錄現在已打包、縮小，甚至可能被 webpack 的 optimization 分割成更小的區塊以進行延遲載入。那麼 webpack 如何管理您所有所需模組之間的互動？這時清單資料就派上用場了...

當編譯器輸入、解析並繪製您的應用程式時，它會針對所有模組保留詳細的筆記。此資料集合稱為「明細」，也是執行時期在將模組打包並傳送至瀏覽器後，用來解析和載入模組的內容。不論您選擇哪一種模組語法，這些 import 或 require 陳述式現在都已變成指向模組識別碼的 __webpack_require__ 方法。執行時期會使用明細中的資料，找出在識別碼背後要從何處擷取模組。

問題

現在您對 webpack 在幕後如何運作有了一些了解。「但是，這對我來說有什麼影響？」您可能會問。大多數時候，沒有影響。執行時期會利用明細執行其任務，而且在您的應用程式進入瀏覽器後，所有事情都會神奇地運作。然而，如果您決定透過利用瀏覽器快取來提升專案效能，這個程序就會突然變成一件需要了解的重要事情。

透過在您的套件檔名中使用內容雜湊，您可以向瀏覽器指出檔案的內容何時變更，進而使快取失效。不過，一旦您開始執行此操作，您就會立即注意到一些奇怪的行為。某些雜湊會在內容顯然未變更時變更。這是因為注入執行時期和明細所造成的，而執行時期和明細會在每次建置時變更。

請參閱我們的輸出管理指南的明細區段，以了解如何擷取明細，並閱讀以下指南以進一步了解長期快取的複雜性。