Webpack与浏览器缓存

想必大家都知道浏览器是有缓存的。浏览器缓存分为强缓存和协商缓存，在命中强缓存时就不会像服务器请求数据。

那么就产生了一个问题，在强缓存生效的时间内一旦服务器资源发生了变化该怎么办？

办法也很简单，修改资源的文件名。只要文件名不一样，那么请求的url也不一样，那么就相当于请求一个新的资源，自然就不会去使用缓存（尽管缓存依然存在）。

那么现在我们的需求便是希望文件名能够体现文件有没有被修改过，如果两次打包前后文件都没有被修改过那么文件名就不会有变化，一旦文件内容发生变化，文件名也必然发生变化。

这样的文件名自然而然的就会想到哈希值，我们计算文件的哈希值，并将其作为文件名不就可以了吗？

那么该怎么做呢？

很简单，在webpack的配置文件里，去修改output字段

module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].chunk.js'
    }
}

按上面那样修改即可。