03-使用loader加載image

hello你們好，本節課要講解的內容是如何使用webpack加載css。上節課已經講解了loader的概念和基本用戶，今天咱們來用loader處理圖片。

首先先安裝對應的loader：

1. file-loader
2. url-loader

執行命令行 npm install flie-loader url-loader -D

而後找一張圖片放到src目錄下面，隨後修改代碼，import對應的圖片，建立一個img標籤，img的src指向引用便可

而後運行npm run build

查看運行頁面

file-loader作了什麼呢，file-loader將文件移動到輸出文件夾，並返回（相對）URL

而後咱們來說解另外一個loader:url-loader

url-loader是在file-loader的基礎上封裝的，若是使用url-loader遇到問題的時候，能夠先查看一下是否已經安裝了file-loader。它像 file loader 同樣工做，但若是文件小於咱們規定的某個值，能夠返回 data URL。這個時候呢，咱們須要改一下loader的寫法，只是用雙引號的這種寫法是簡略的寫法，這種寫法會使用loader的默認配置。如今咱們須要對loader進行手動配置，那麼應該這麼寫

{
    loader:'url-loader',
    options:{}
}

loader對應的loader名稱，options對應的配置項對象，咱們在配置項裏對應的配置

{
    loader:'url-loader',
    options:{
        limit:1024*100
    }    
}

當圖片不大於100kb時會被轉換成data URL。若是圖片大於100kb時，url-loader會默認使用file-loader來處理文件。

咱們來引用另外一張圖片，

而後執行npm run build

查看頁面，F12

本節課的內容就到這裏

若是你有所幫助的話，請點個贊吧！