babel緩存

第二次構(gòu)建時會讀取緩存，加快構(gòu)建速度。
babel把編譯后的文件進(jìn)行緩存，當(dāng)其他文件變化時不用再重新構(gòu)建。
-->讓第二次打包構(gòu)建速度更快

文件資源緩存

維護(hù)hash值變換，控制資源更新。
-->讓代碼上線運行緩存更好使用，上線代碼性能優(yōu)化。
hash:每次webpack 構(gòu)建時會生成唯一的hash值。每次構(gòu)建生成的hash值不一樣。
問題：js和css文件使用同一個hash值，如果重新打包會導(dǎo)致所有緩存失效。（可能我卻只改動了一個文件）
chunkhash:根據(jù)chunk生成的hash值，如果打包來源于同一個chunk，（chunk：所有根據(jù)入口文件引入的東西都會生產(chǎn)成一個chunk）那么hash值一樣。
問題：js和css的hash值還是一樣的。
原因是css是在js中被引入的，所以同屬于一個chunk
contenthash:會根據(jù)文件的內(nèi)容生成hash值，不同的文件內(nèi)容hash值不一樣。
js文件
樣式文件
HTML文件

  /* 緩存：
    babel緩存：
        cacheDirectory:true
        -->讓第二次打包構(gòu)建速度更快
    文件資源緩存：
        hash:每次webpack構(gòu)建時會生成一個唯一的hash值
        問題：因為js和css使用同一個hash值，如果重新打包會導(dǎo)致所有的緩存失效（可能我只改動了一個文件）
        chunkhash:根據(jù)chunk生成的hash值。如果打包來源于同一個chunk,name hash值就一樣。
        問題：可能js和css還是一樣的，因為css在js中被引入的，同屬于一個chunk。（所以根據(jù)入口文件引入的文件都會生成一個chunk)
        contenthash:根據(jù)文件內(nèi)容生成hash值，不同文件不一樣
        -->讓代碼上線運行緩存更好使用
     */

image.png

image.png

image.png