????在前端開發(fā)過程中风科，在html、css和js中都經(jīng)常會需要引用圖片乞旦，引用圖片就需要考慮圖片引入路徑的正確性贼穆。當項目進行打包會將元素引用的圖片進行抽取放在固定位置，如圖1-1與圖1-2所示杆查，這就需要對圖片的引入位置進行匹配。Angular-cli底層默認使用webpack進行項目壓縮與打包臀蛛，webpack是通過ulr-loader和file-loader配合完成打包后圖片路徑匹配工作亲桦，html中的圖片需要使用html-withimg-loader。
?????? url-loader與file-loader的區(qū)別
?????? file-loader完成的工作是將圖片打包到一個固定位置然后將新路徑與元素重新匹配浊仆，url-loader有一個配置項limit當圖片小于limit設(shè)置的大小客峭，就將元素轉(zhuǎn)換為base-64編碼，當大于這個配置項大小就調(diào)用file-loader抡柿，也就是說url-loader底層依賴file-loader舔琅，但是安裝完url-loader后不需要另外安裝file-loader。
?????? JavaScript中的圖片路徑匹配
?????? Js代碼中的圖片路徑匹配處理方式與html和css中處理方式有很大的不同洲劣，在js中的圖片路徑如果你需要進行打包就必須對其進行模塊依賴標記备蚓，如圖1-2所示课蔬，不然webpack無法分辨出這是一個圖片路徑還是一個普通的字符串。值得注意的是在js中使用es6模塊語法import *? form形式即可郊尝，但是在typescript中圖片的依賴標記需要使用不同的標記二跋，本文使用的是common.js的形式，并且require需要在代碼中進行聲明流昏，如圖1-3所示扎即。
css中的圖片路徑匹配
????css中對圖片的引用不需要過多的處理，例如background這種屬性對于圖片的引用况凉，loader會自動做出處理谚鄙。
參考鏈接
