我正在开发使用 reactjs 和 webpack 开发的 Web 应用程序。每次部署后，我们必须要求用户清除浏览器缓存并重新启动浏览器。我认为 javascript 包文件和 css 文件都被缓存在用户浏览器上。
我们如何强制浏览器不缓存这些文件或使其从服务器下载最新文件。
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" href="styles.css" media="screen" charset="utf-8">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
你可以使用html-webpack-plugin
plugins: [
new HtmlWebpackPlugin({
hash: true
})
]
哈希：真| false 如果为 true，则将唯一的 webpack 编译哈希附加到所有包含的脚本和 css 文件中。这对于缓存破坏很有用。
您应该将 html-webpack-plugin 与模板 html 一起使用，并在输出中放置哈希配置。所以你的 webpack 配置看起来像这样：
output: {
filename: "[name].[hash].js",
path: <path to your bundle folder>
}
new HTMLWebpackPlugin({
hash: true,
template: paths.resolveFromRoot("src/index.html") //where you want the sample template to be
})
你的 index.html 将是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
HTML webpack 插件会自动将修改后的脚本插入到你的 bundle 文件夹中创建的 index.html 中。希望这可以帮助。对于缓存修复，您可以参考https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching，其中提到了有效缓存解决方案的版本控制和服务器响应标头配置。