webpack- hash chunkhash contenthash

Webpack裏面有三種hash，分別是：hash, chunkhash, contenthash.在咱們嘗試去區分他們仨以前，先來看看爲何咱們須要hash。

一：爲何咱們須要hash？

你們都知道咱們的瀏覽器會緩存咱們的文件。緩存是把雙刃劍，好處是瀏覽器讀取緩存的文件，能帶來更佳的用戶體驗（不須要額外流量，速度更快）；壞處是有時候咱們修改了文件內容，可是瀏覽器依然讀取緩存的文件（也就是舊文件），致使用戶看到的文件不是最新的。

怎麼解決上述的問題呢？通常就是咱們要主動告訴瀏覽器要不要讀取緩存。舉個例子，咱們的index.html文件裏面引用了一個index.js文件，用戶每次請求index.js會按照瀏覽器的緩存機制去決定要不要讀取緩存。可是，若是是index.js?v=1，那麼這種狀況下，瀏覽器就不會去讀取緩存，能保證此次請求必定是從服務器上讀取的最新的index.js文件。

說回webpack，webpack提供一種在文件名裏面嵌入hash的方式，每次打包都生成新的文件名，例如：

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    }
}

上面的代碼，build以後，咱們可能會獲得相似於：index.94f49d9b5ee809be277c.js 和 main.4afbc09e2f228ea4bc2f.js的文件。前面咱們說到，Webpack裏面有三種hash，分別是：hash, chunkhash, contenthash，接下來咱們來看看三者的區別以及使用場景。

二：hash

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js',
    }
}

咱們執行npm run build以後獲得：

你們從圖上能夠看到index.js和main.js文件的hash是同樣的。hash是項目級別的，他的缺點是假如我只改了其中一個文件，可是全部文件的文件名裏面的hash都是同樣的。這樣會致使原本應該被瀏覽器緩存的文件，強制要去服務器讀取一遍，可是這個文件又和以前的舊文件並無區別，這樣就很很差了。那能不能作到只有改變了文件，hash值才變，而沒有改變的文件，文件名裏面的hash值就不變呢？答案就是chunkhash。
三：chunkhash
chunkhash是針對entry的每個入口文件，獨立的hash。若是entry裏面的其中一個文件內容改變，只會改變這個入口文件build以後的文件名，而不會影響到其餘文件。

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    }
}

咱們執行一次npm run build,獲得：

咱們改動一下./src/main.js文件的內容，可是不修改./src/index.js，再執行一次npm run build,獲得：

對比以上2張圖能夠看出來index.js文件的hash值沒有改變，可是main.js的hash值改變了。

四：contenthash