webpack自定義loader 手寫封裝loader

一些細節的東西就不說明了,例如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就可以自己編寫內容了

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章