文科少女學程式

前陣子有遇到需要在build後，把產出的一些js、img、font檔案加上客製化hash，以避免網頁cache住的調整事項。但是透過file loader來客製產出的檔名hash後，實際上完成build，卻發現每個svg檔案都被重複多build出一份沒有被改成客製hash檔名的檔案，font的檔案還有無法被解析的問題，最後和前輩查了很久，才排除了這個狀況。

避免使用file-loader設定時，在build後，產生重複的svg檔案
實作情境
為了客製化build出來的檔案名，我們需要在vue.config檔案中使用file-loader來設定檔案名稱。這時候會在configureWebpack下的module裡面設定rules(除了svg檔外，還可以依照實際的需求設定其他檔案類型的rule)，設定內容如下。

進行yarn build或npm run build之後，會發現build出來的dist資料夾裡面，出現兩個相同，但是名字中的hash不同的檔案。


問題發生原因&解決方式
為什麼會發生這個問題？
會產生兩個相同的檔案，主要是因為build的rule套用到預設的rule和file-loader的rule。預設的rule並沒有被file-loader的rule覆蓋過去，而是兩個rule都被執行了。

怎麼解決這個狀況？
為了解決這個問題，需要先移除掉原本預設的rule。
可以在vue.config的chainWebpack選項中用delete('svg')來將預設的svg build規則移除，實際上寫法如下：

做完這段的設定後，就可避免build出兩個檔名不同，但實際內容相同的svg圖檔了。

貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。