webpack打包缓存_webpack生成的index.html如何不被缓存？

浏览器严格以url为单位，按服务器端的返回的http响应的报头中的相关信息控制缓存。如果后台服务返回的http响应头中没有etag字段，nginx会自动加上。具体计算方法为，将响应体中的所有信息进行哈希运算，运算出来的值填入这个字段etag字段。

对于index.html，相应头中不应该包含last-modified字段，这样下次刷新时，浏览器发送的请求中会包含上一次从响应头中拿到的etag字段。当这个请求被发送到nginx时，如果nginx对比发现，请求头中的etag和后台返回的响应头中的etag一致，则会舍弃响应体，并将http状态码设为304，浏览器收到这个响应后就会直接使用缓存中的数据了。

对于上面的这套逻辑，我们发现中间有一个弊端，就是每一次请求的时候，浏览器真的会与服务器发生通信，这对于更新频率相对而言比较低的css和js等文件来讲，有点浪费。所以这些文件我们采用文件名中包含哈希值的方法，来控制缓存，这些文件利用过期时间的机制，将它们设成长期有效。这样浏览器刷新的时候，会总是从缓存中读取文件内容。而需要更新这些文件的内容的时候，则生成新的文件名，并修改index.html中的链接地址。

以上这些都设置好以后，那么我们可以通过控制index.html这一个url，来控制所有文件内容的缓存，二次刷新的时候，只有一个url需要与服务器通信，而不必每个url都与服务器端通信一下，检查是否有更新。