Webpack與瀏覽器緩存

想必大家都知道瀏覽器是有緩存的。瀏覽器緩存分爲強緩存和協商緩存，在命中強緩存時就不會像服務器請求數據。

那麼就產生了一個問題，在強緩存生效的時間內一旦服務器資源發生了變化該怎麼辦？

辦法也很簡單，修改資源的文件名。只要文件名不一樣，那麼請求的url也不一樣，那麼就相當於請求一個新的資源，自然就不會去使用緩存（儘管緩存依然存在）。

那麼現在我們的需求便是希望文件名能夠體現文件有沒有被修改過，如果兩次打包前後文件都沒有被修改過那麼文件名就不會有變化，一旦文件內容發生變化，文件名也必然發生變化。

這樣的文件名自然而然的就會想到哈希值，我們計算文件的哈希值，並將其作爲文件名不就可以了嗎？

那麼該怎麼做呢？

很簡單，在webpack的配置文件裏，去修改output字段

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

按上面那樣修改即可。