webpack教程(五)——圖片的載入

標籤：安裝   pre   ade   直接   div   localhost   web   art   start   

首先安裝的依賴

npm install file-loader --save-dev
npm install image-webpack-loader  --save-dev
npm install url-loader --save-dev

在webpack.config.js檔案中加入如下配置 

 

在css檔案中引入該圖片作為背景圖片。

運行npm run start

開啟瀏覽器http://localhost:8080/

看到圖片已經引入進來而且命名經過了雜湊處理。

看下url-loader是什麼樣子的，同樣修改webpack.config.js檔案

意思是小於10K的轉為base64,大於10K的還是原圖片。

直接運行npm run start

圖片已經轉化為base64編碼了。

 

webpack教程(五)——圖片的載入