webpack緩存渲染的index.html加載不好，加載scss失敗

Question

在我使用 webpack 配置的項目中，單頁“index.html”具有用於加載帶有散列名稱的 css 和 js 的標簽。 每次部署一個新的 index.html 都由 webpack 緩存定義。

new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
    title: 'Caching',
    template: './index.html',
    filename: 'index.html'
}),

此 index.html 位於 dist 文件夾下，其中存儲了 css 和 js 及其散列名稱。

問題是無法在瀏覽器中正確加載新的 html，其中每次新部署后都會調用舊版本的 html。

這樣客戶就可以看到因標簽中 index.html 和 css 名稱版本不一致而損壞的 UI。

Answer 1

據我測試，頁面 HTML 的 HTTP 請求的所有請求都駐留在瀏覽器緩存中。 每當為 HTML 的每個 HTTP 請求發出請求時，只要瀏覽器緩存不明確，響應就來自瀏覽器緩存，而不是直接來自服務器。 我們需要直接從服務器獲取響應以獲取請求的 HTML 的更新內容。

解決方案：我們有配置服務器的解決方案，服務器的每個響應都不會緩存在瀏覽器中。 在利用這個優勢之前，最重要的一點是我們的 HTTP 請求應該直接到達服務器（**非常重要的是不是來自瀏覽器緩存）。 從服務器獲得直接響應后，這可以保證響應不會被緩存在瀏覽器中，並且用戶不會因為緩存響應而看到任何損壞的 UI。

除了服務器端配置之外，我們還需要向服務器明確請求更新的 HTML，以獲得服務器響應，包括讓瀏覽器知道不存儲它的請求正文。

對於當前情況，頁面需要向服務器發出明確請求，以獲取讓瀏覽器知道不存儲 HTML 的狀態。

為了解決這個問題，我們更改了 url 以從瀏覽器獲取顯式 HTML 響應。 這是解決我們當前問題的唯一方法。

任何想討論的人，熱烈歡迎並提出您的建議。