Webpack HTML 模板是否应该在文件名中包含哈希？答案

【问题标题】：Should Webpack HTML templates have hash in file name?Webpack HTML 模板是否应该在文件名中包含哈希？
【发布时间】：2021-10-27 19:30:50
【问题描述】：

我是使用 Webpack 捆绑 node.js 应用程序的新手。我知道文件名中的哈希有助于用新内容更新浏览器缓存。

假设我有以下HtmlWebpackPlugin 配置和快速路由：

// webpack.front-end.config.js
plugins: [
  new HtmlWebpackPlugin({ minify, template: path.resolve('./src/index.html'), filename: 'index.[hash].html', chunks: ['home'] })
]

// server.js
app.get('/', (req, res) => {
  res.sendFile('index.abc1234.html');
});

然后我在index.html 中更改我的内容并生成index.def3456.html。

如何编写我的快速路由或更改我的 webpack 配置，这样我每次更改 index.html 内容时都不必更改 res.sendFile() 调用中的文件名？我是否应该在index.html 的文件名中包含哈希？我知道我可以将 meta 标签放在 index.html 中以避免浏览器缓存，但这似乎会降低性能。

【问题讨论】：

标签： javascript express webpack caching

【解决方案1】：

在这里使用哈希是没有意义的。客户端不直接请求 html 文件，因此您命名文件并不重要。客户端看到的只是/ 端点。

【讨论】：