在我使用 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。
【问题讨论】：
标签： javascript html webpack
据我测试，所有对页面 HTML 的 HTTP 请求都驻留在浏览器缓存中。 每当对 HTML 的每个 HTTP 请求发出请求时，只要浏览器缓存不明确，响应来自浏览器缓存而不是直接来自服务器。 我们需要直接从服务器获取响应以获取请求的 HTML 的更新内容。
解决方案：我们有配置服务器的解决方案，使服务器的每个响应都不会缓存在浏览器中。在利用这个优势之前，最重要的一点是我们的 HTTP 请求应该直接到达服务器（**非常重要的是不是来自浏览器缓存）。 从服务器获得直接响应后，这可以保证响应不会被缓存在浏览器中，并且用户不会因为缓存响应而看到任何损坏的 UI。
除了服务器端配置之外，我们还需要向服务器发出显式请求以获取更新的 HTML，该 HTML 可以获得服务器响应，包括让浏览器知道不存储它的请求正文。
对于目前的情况，页面需要向服务器发出显式请求以获得状态，让浏览器知道不存储HTML。
为了解决这个问题，我们更改了 url 以从浏览器获取显式 HTML 响应。 这是解决我们当前问题的唯一方法。
任何想讨论的人，热烈欢迎并提出您的建议。
【讨论】：