一些細節的東西就不說明了,例如webpack的整體配置什麼的,這邊只是在已有webpack配置的基礎上,封裝&使用自定義的loader。個人覺得最好的說明方式就是直接上實例:將引用的圖片url,根據環境替換成所需要的路徑
1.文件目錄結構
這邊將自定義的static-loader放在文件夾rules內與webpack配置文件同級
(這個存放路徑看個人,是可以修改的,這裏說明路徑地址,是因爲webpack配置中需要引用該路徑)
2.webpack配置
(1)配置resolveLoader
(webpack默認使用的loader路徑爲node_modules,可以直接在rules配置引用,
而自定義的loader,不在指定範圍內是無法調用到的,即使在一開始聲明require也無法正確使用,
便需要在此加入自定義loader的路徑,增加webpack調用loader的範圍)
(2)增加module.rules
(按照引用別的第三方loader一樣配置)
3.封裝自定義的功能loader
(格式很簡單,重點在於loader-utils,loaderUitls.getOptions可獲取webpack配置rules中的options以供使用 )
這只是一個簡單的替換路徑loader,具體別的需求的loader就可以自己編寫內容了