複習webpack4之webpack與瀏覽器緩存

以前學習過webpack3的知識，可是webpack4升級後仍是有不少變更的，因此此次從新整理一下webpack4的知識點，方便之後複習。

此次學習webpack4不單單要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，好比打包原理等等，因此可能會省略一些比較基礎的內容，可是但願我能夠經過這次學習掌握webpack，更好地應對之後的工做。

1.瀏覽器緩存

先新建一個js，裏面的代碼以下。

打包後的結果以下

此時，用戶首次進入頁面後，main.js和vendor.chunk.js會被瀏覽器緩存起來，這樣用戶第二次進頁面，就不用從新下載js了，可是這樣會形成一個問題，咱們沒有加hash值，因此若是js發生變化，用戶不強制刷新的話，代碼時不會被更新的。

2.contenthash

咱們給output文件名加上contenthash，意思是若是文件內容發生變化，hash值纔會改變。

打包後的文件也會加上hash值。

若是對應文件源代碼沒有改變，那麼文件名稱不會發生任何變化。可是一些老版本的webpack可能會發生沒改變代碼，可是hash值也發生變化的狀況，這時候就要去加一個配置。在optimization中加一個runtimeChunk。

這樣打包出會多一個runtime.js文件。

webpack在打包時，會把庫和業務代碼之間的關係作manifest，它既存在於業務代碼(main.js)，也存在於庫中(vendor.js)，在舊版webpack中，mainfest在每次打包的時候的時候可能會變化，因此contenthash值也會跟着變化。配置runtimeChunk後，會把manifest提取到runtime中，這樣打包就不會影響到其餘js了。