什么是浏览器缓存：
简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。
浏览器和网站服务器是如何标识网站页面是否更新的机制？
第一次请求：
再次请求：
解决缓存问题的思路
方案一：打包时，给文件名称后面加hash值，强制浏览器重新加载新文件（具体方法见后文）
方案二：在静态文件引用时，在路径后面，增加时间戳或者随机数。该方案时对方案1的补充。因为方案1不能解决静态资源的问题。比如跟后台链接的ipConfig.js文件放在public路径下，打包时是直接复制到dist下的，不会修改文件名称，不能加hash。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<script src="<%= BASE_URL %>ipConfig.js?time=<%= new Date().getTime() %>"></script>
<title>测试页面</title>
</head>
<body>
<noscript>
<strong>We're sorry but iods_web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
方案三： Expires、Last-Modified、Etag缓存控制。该方案也是对前两个方案的补充。该方案主要使用于，在应用运行过程中被动态修改的文件，缓存在浏览器，不能重新加载的场景。
具体的修改方法是，在apache的httpd.conf中，
- 去掉模块前的注释：LoadModule expires_module modules/mod_expires.so
- 并在该文件中增加下面代码
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "modification plus 0 seconds"
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>
方案一的具体实现：webpack打包时给文件添加hash值：
hash值的添加，有三种：hash，chunkhash，contenthash。用法和区别如下：
-
hash
hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。代码如下：
image.png
2 chunkhash
采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。
chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。配置如下：
output: {
path: path.resolve(__dirname, 'dist'),
// filename: '[name].[hash:5].js'
filename: '[name].[chunkhash].js'
},
注意下图，使用chunkhash时，entry有多个入口
