webpack hash缓存

浏览器为了优化体验，会有缓存机制。如果浏览器判断当前资源没有更新，就不会去服务端下载，而是直接使用本地资源。在webpack的构建中，我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变的lib包中来解决新资源缓存问题。

在webpack构建中通过配置filenames来决定输出的文件名

webpack内置的hash

• hash：the hash of the module identifier

  • webpack 默认为给各个模块分配一个 id 以作标识，用来处理模块之间的依赖关系。而默认的 id 命名规则是根据模块引入的顺序，赋予一个整数(1、2、3……)。（hash 是基于整个 module identifier 序列计算得到的，所以 JS 或 CSS 文件如果使用该 hash，则所有值都一样，而任意增添或删减一个模块的依赖，都会对整个 id 序列造成影响，从而改变 hash 值。这样的话 JS 或 CSS 文件是不适合使用该 hash 值的。对于图片、字体、PDF 等资源该 hash 还是可以生成一个唯一值的）【也就是说同一过程产出的产物的hash值都是一样的】

• chunkHash：the hash of the chunk content

  chunk指代的是模块，也就是根据模块内容计算的hash值。main模块与slove模块的hash值是不同的，这样我们修改main中的内容就不会修改slove的名称，slove的缓存就可以继续使用了。【修改了js的内容，css的打包名称也会改变】

• contentHash：the hash of extracted content

  根据文件内容来定义hash值得，所以我们就可以使用插件extract-text-webpack-plugin定义的contenthash来打包。

为了一份理想的缓存文件，我们需要做这些事情：

• 抽离 boilerplate（[runtime & manifest）
• 将 module identifier 默认的数字标识方式转成使用路径标识
• JS 文件使用 chunkhash
• 抽离的 CSS 样式文件使用 contenthash
• gif|png|jpe?g|eot|woff|ttf|svg|pdf 等使用 hash
• 设置 namedChunks 为 true

hash变了 重新打包完毕后 引用这个文件的那句代码也变了 浏览器请求资源发现是个新文件 找不到缓存（因为本地缓存的还是旧哈希） 直接当新资源请求了