Webpack 中 file-loader 和 url-loader 的區別

若是咱們但願在頁面引入圖片（包括img的src和background的url）。當咱們基於webpack進行開發時，引入圖片會遇到一些問題。

    其中一個就是引用路徑的問題。拿background樣式用url引入背景圖來講，咱們都知道，webpack最終會將各個模塊打包成一個文件，所以咱們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css文件所在的路徑的。這就會致使圖片引入失敗。這個問題是用file-loader解決的，file-loader能夠解析項目中的url引入（不只限於css），根據咱們的配置，將圖片拷貝到相應的路徑，再根據咱們的配置，修改打包後文件引用路徑，使之指向正確的文件。

    另外，若是圖片較多，會發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy。

    url-loader和file-loader是什麼關係呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。所以咱們只須要安裝url-loader便可。

vue-cli建立url-loader的工程中配置以下：

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

}

小於10k的圖片在img下不會有圖片文件，而是直接把圖片的base64值寫到html引入圖片的地方

大於10k的圖片會放在img下，須要的時候經過http請求下載