本片文章將記錄webpack中如何處理圖片的打包問題。在介紹圖片打包處理之前，先說明一下引入圖片的三種方式：

• 使用背景圖片：將一個包裹圖片的元素的css中的background屬性設置為圖片路徑
• 使用js導入：可以使用commonJS規范引入圖片資源

const imgUrl = require('圖片路徑') 圖片的dom對象.src=imgUrl

• 使用img標簽：<img src= '圖片路徑'>

使用背景圖片

先準備一張圖片資源：

index.html中添加代碼：

在index.css中添加樣式：

由于官網中介紹了在最新版的css-loader中，可以支持對圖片資源的處理，因此，單純在webpack.config.js中配置css-loader就可以了。

如果不想使用css-loader來處理url對應的資源，可以配置：

{test: /\.css$/,use: ['style-loader', {loader: 'css-loader',options: {url: false}}] }

使用js引入

若使用commonJS規范在入口文件中導入圖片資源，首先index.html中添加代碼：

index.js中添加代碼：

這時需要下載包，url-loader和file-loader都可以處理圖片：

webpack.config.js文件中添加，使用url-loader或者file-loader都可以：

這樣圖片就可以正常顯示了。

使用img標簽

首先index.html中添加：

這種方式需要用到html-loader來處理，先下載：

配置：

我們可以觀察到，打包后的圖片是base64編碼格式的

這是因為網頁中的每一張圖片都需要發起一次網絡請求，如果圖片資源過多就會發起很多次的請求，這樣會影響網站的性能。如果圖片經過base64處理，把圖片資源打包進js文件，就不用單獨發起請求。但是并不能把所有圖片都轉換為base64，圖片太大的話其base64編碼太大，反過來也會影響網站性能。可以在url-loader中設置limit屬性，它是圖片是否進行base64編碼的閾值，如果小于等于這個值就可編碼，大于這個值就不處理，單位是字節。

關于webpack對圖片資源的處理就到這了~

本篇筆記是看了B站up主“左耳擊水獸”的講解視頻記錄下來，感興趣的同學可以直接看他視頻哦。

總結

以上是生活随笔為你收集整理的webpack学习笔记（六）：图片打包处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。