關於url-loader和file-loader的一個小坑

        第一次寫文章，心裏仍是有點激動，我也是一個剛入前端坑的萌新，不知道我這篇文章對剛入webpack的坑的小夥伴有沒有什麼幫助，但願各位大佬輕點噴，這篇文章我也是想了好久才決定寫的，由於我在這個坑上踩了很長時間，但願後面的人看到我這篇文章能避免這個坑。

       咱們在使用webpack進行開發時，常常會用到圖片，而引入路徑無疑是一件很是使人頭疼的事情，不知道多少人在這裏撞過。

       固然，這篇文章中我也不會對file-loader和url-loader的功能作太過詳細的介紹，若是想了解的小夥伴能夠自行去百度。

       咱們都知道，webpack最終會將各個模塊打包成一個文件，所以咱們樣式和內容中的圖片路徑是相對於入口html頁面的，而不是相對於咱們原始的css文件和html文件所在的路徑。這個問題是可使用file-loader所解決的。若是圖片較多，就會發不少http請求，這就會下降頁面的性能。固然，這個問題咱們也可使用url-loader來進行解決。url-loader會將圖片轉換成base64字符串，再將這串字符打包到文件，最後只須要發送一次請求這個文件，就能夠引用了。

好了以上就是背景，接下來進入正題：

       我是在作一個vue插件的時候。最初由於沒有引用，因此在打包過程當中也沒有使用file-loader或是url-loader。當我在項目中新加入了圖片，我就必須考慮打包方式了，最初在webpack配置中選擇了file-loader來圖片進行打包，由於最初路徑沒有設置好，致使圖片不出來，剛開始百度谷歌各類方法都試過，仍是不行，最後看到了url-loader這種圖片打包方式，而後就直接引用了，本想着「既然我路徑不對，我就把圖片都轉爲base64，這樣應該就不會出問題了」，但是結果仍是不如我所願，圖片仍是出問題了，沒有顯示，控制檯也乾乾淨淨。不像網上說的什麼圖片找不到報404啊啥的。圖片就是不出來，查看打包後的base64字符串，也嘗試着把它還原成圖片，結果圖片仍是不出來，朋友給我指出，這個多是我使用url-loader的方式有問題，而後我去網上各類找教程各類百度，可是對url-loader的配置方式和個人都截然不同，網上也找不到關於url-loader打包後的base64字符串的問題解釋，沒辦法只能本身找答案了。最後，研究個人url-loader的配置時，看到了下面還有我寫的file-loader配置，突發奇想，會不會是我寫的file-loader有問題。我請教朋友，朋友說他也沒遇到過，不過兩個在一塊兒應該不衝突，我想我仍是本身試試，才能得出結論。因而我將關於file-loader的配置所有註釋掉以後，再次進行打包，果真圖片正常顯示了。個人想法是對的，而後又去仔細研究了一下關於url-loader和file-loader之間的關係，網上只是指出了url-loader封裝了file-loader，並無提到二者同時引入的衝突問題。

       也許我這個問題在大佬眼中有些那啥，可是，這是我學習前端的過程當中，又成功的填上了一個坑，因此我仍是想分享給你們。

最後劃重點：

「在使用webpack進行打包時，對圖片路徑的處理方法經常使用的有兩種，一種是file-loader，一種是url-loader，當咱們使用其中一種是，請把另外一種刪掉，否則會出現圖片沒法正常顯示的問題，最關鍵的是，他還不給你報錯，這是最氣人的」