首先安裝的依賴

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教程(五)——圖片的加載