場景：專案使用的是後端模版返回首頁，首頁裡面有一個js連結，該連結指向的是使用webpack編譯過後的程式碼。由於編譯後的檔名稱需要在index.vm 中引入，因此，如果給編譯後的index檔案加hash值作為檔名的話，由於每次的hash值不一樣，沒法引用，那麼該如何解決js檔案的快取問題呢？
首先，js快取的原因是因為瀏覽器會對相同的get請求進行快取，那麼如果我們改變每次請求的名稱，其實就不會有快取了。

• 一開始使用的方式是直接在編譯後的js檔案後面加入

?v=Math.random()

這樣每次都會把編譯後的檔案重新載入一遍，雖然是可以解決快取的問題，但是會造成網路請求的浪費。

• 第二種方式就是使用assets-webpack-plugin 的外掛。該外掛會在每次編譯完成後，生成一份webpack.assets.js檔案，檔案的內容是最新的編譯後的檔名稱

eg:
window.WEBPACK_ASSETS={"main":{"js":"89c6e5b6d9bbc5fec2b8.index.js"}}

這樣我們只需要先載入webpack.assets.js檔案，然後通過該檔案找到對應的編譯後的檔名稱，再載入，就可以解決快取問題。而且，這種方式還可以做js的版本控制。
具體步驟如下
1. 安裝assets-webpack-plugin
2. 在webpack中引入

const AssetsPlugin=require('assets-webpack-plugin');

plugins:[
    new AssetsPlugin({
        filename:'build/webpack.assets.js',
        processOutput:function(assets){
            return 'window.WEBPACK_ASSETS='+JSON.stringify(assets);
        }
    })
]

1. 這樣引入完成後，每次build完成後，都會在webpack.assets.js中生成以下程式碼

window.WEBPACK_ASSETS={"main":{"js":"1541559546eeb5ec7570.index.js"}}

1. 名字帶hash值是在webpack的output中配置的

output:{
    filename:'[hash].index.js'
}

1. 在最終引用檔案時

old:
<script src="/build/index.js"></script>
new:
<script>
    document.write('<script type="text/javascript" src="/resources/web/build/webpack.assets.js?v='+Math.random()+'"><\/script>');
</script>
<script>
    document.write('<script src="/resources/web/build/' + window.WEBPACK_ASSETS['main'].js + '"><\/script>');
</script>

通過上面我們可以看出，每次我們都會載入webpack.assets.js,但是該檔案非常小，通過該檔案找到編譯後的index.js.再判斷是否需要載入。