深入理解 Webpack：main.[contenthash].js 與 SPA

前言 - Prologue

在 Webpack 5 中，已經棄用 [hash]，改為只使用 [contenthash]。

本文將探討 [contenthash] 的作用、如何確保瀏覽器下載最新版本的應用程式，以及 main.[contenthash].js 在單頁應用程式（SPA）中的關聯性。

正文 - Main text

重點整理：

Webpack 5 已經棄用 [hash]，改為只使用 [contenthash]。
main.[contenthash].js 是 Webpack 打包後生成的最終輸出檔案的命名格式。
main 表示檔案的名稱，通常是根據入口點（Entry）的名稱來命名，但也可以根據自己的需求進行配置。
[contenthash] 是根據檔案內容計算的唯一編譯標識符，用於確保瀏覽器下載最新版本的應用程式。
[contenthash] 的值會根據檔案內容的更改而改變，使得每次應用程式更新時都能生成新的 [contenthash]。
main.[contenthash].js 在瀏覽器中具有唯一性，每次生成的 [contenthash] 值都是不同的。
使用 [contenthash] 可以解決瀏覽器快取問題，確保用戶下載最新版本的應用程式。
在單頁應用程式（SPA）中，main.[contenthash].js 是應用程式的主要 JavaScript 檔案，包含了應用程式運行所需的所有程式碼和資源。
在 SPA 架構中，main.[contenthash].js 可能包含應用程式的主要邏輯，而其他模組則根據需要以獨立的 chunks 加載。
使用熱模組替換（HMR）時，main.[contenthash].js 可以實現僅更新變更的模組而不影響其他部分。
在生產環境中，main.[contenthash].js 經過優化並最小化，以提供更好的效能。
確保在每次部署應用程式時都生成新的 [contenthash] 值，以便瀏覽器請求最新版本。
Webpack 配置中可以使用 [contenthash] 變數來定義輸出檔名。

main.[contenthash].js 的作用是作為應用程式的主要 JavaScript 檔案，包含了應用程式運行所需的所有程式碼和資源。它是由 Webpack 根據應用程式的入口點（Entry）和模組（Module）相依關係打包而成的。

這個檔案通常是在 HTML 檔案中引入的，以開始運行應用程式。

透過使用 [contenthash]，當對應用程式進行更新時，Webpack 會生成一個不同的 [contenthash]，從而改變輸出檔案的檔名，這樣瀏覽器就會重新請求並下載最新的檔案，確保用戶使用的是最新版本的應用程式。

使用 [contenthash] 的主要好處是解決瀏覽器的快取問題，確保用戶在每次更新應用程式時都能夠載入最新的版本。這對於網站的更新和部署非常有用，同時也能提供更好的緩存控制，避免用戶瀏覽器緩存舊的應用程式檔案而產生問題。

生成方式

[contenthash] 的生成方式：

Webpack 使用一種 Hash (哈希) 算法（預設是 MD5）根據檔案內容生成 [contenthash] 的值。
[contenthash] 的生成是根據整個檔案的內容，即使僅有一個字符發生更改，也會產生完全不同的 [contenthash] 值。

[contenthash] 可以是不同的 Hash 算法，例如 MD5、SHA-1、SHA-256 等，具體的 Hash 算法取決於 Webpack 的配置。

可以通過 Webpack 配置中的 output.filename 選項來自定義檔案名稱的格式，包括是否包含 [contenthash]。