為什么要使用url-loader
在前面已經介紹了css文件可以使用第三方loader去加載。
在一個項目中，也不僅僅只有html，js和css文件，還有圖片文件，字體文件等等。當我們給一個css樣式設置背景圖片時：
你會發現，webpack打包的時候會報錯。
報錯：無法處理這種格式的文件，解決這個問題就需要url-loader和file-loader。
安裝url-loader
- 安裝url-loader，
cnpm install url-loader file-loader –D - 在webpack.config.js中配置第三方loader
這個時候重新啟動項目，你會發現圖片被加載為：
我們會發現，圖片的url地址被默認轉化為了base64格式，如果一張圖片太大的話，這樣的轉換反而降低效率，我們希望在圖片比較小的時候加載為base64,圖片較大則加載原始圖片。
在webpack.config.js中如下配置：
像在url上加參數一樣給url-loader設置一個limit參數（單位字節），大於或等於給定的limit值，則不會被轉為base64格式的字符串，如果小於給定的limit值，則會被轉為base64字符串。
我們可以發現圖片的后綴已經是.png格式了，但是名稱還不是圖片原來的名稱， 因為webpack在打包的時候防止名稱重復，自動設置了hash名，如果想要使用圖片原始的名稱作為路徑，則還需要給url-loader增加一個參數
參數分析：- name： 文件的名稱
- hash-8: 取8位hash值作為文件名前綴
- name: 使用圖片原始的名稱
- ext：使用圖片原始的后綴名
解釋為什么webpack會自動給圖片設置hash名，防止名稱重復
如果我們在兩個文件夾中分別引入兩個圖片名稱的圖片。如下所示
在html頁面中新建兩個div
在css樣式中，分別引入這兩張圖片
看看webpack打包后的樣式：
我們明明引入了兩張不同的圖片，但是他們卻引入了同一張圖片，因為webpack打包之后，圖片會被存放在 / 目錄下的內存中，仔細觀察圖片中的url地址，就會發現跟我們的在css樣式中的引入路徑並不一樣，所以會出現引入同一張圖片的問題。
解決問題：在url-loader中使用圖片原始名稱的時候，添加hash值來區別是不是同一張圖片
