webpack—url-loader解決項目中全部圖片打包問題

  在使用webpack對項目進行打包時，圖片的引用遇到一些問題，整理一下webpack對圖片打包的思路。

url-loader

使用url-loader加載器實現項目中的路徑解析。具體使用其用來打包圖片的過程以下：

1. 安裝：npm i url-loader -D
2. webpack.config.js配置文件中添加處理規則：
module：{
    rules：[
        { test: /\.(jpg|png|gif|bmp|jpeg)$/,//正則表達式匹配圖片規則
        use: [{
        loader:'url-loader',
        options:{
            limit:8192,//限制打包圖片的大小：
            //若是大於或等於8192Byte，則按照相應的文件名和路徑打包圖片；若是小於8192Byte，則將圖片轉成base64格式的字符串。
            name:'images/[name]-[hash:8].[ext]',//images:圖片打包的文件夾；
            //[name].[ext]：設定圖片按照原本的文件名和擴展名打包，不用進行額外編碼
            //[hash:8]：一個項目中若是兩個文件夾中的圖片重名，打包圖片就會被覆蓋，加上hash值的前八位做爲圖片名，能夠避免重名。
        }
        }]}
    ]
}

web項目中圖片引用的三種方式

1.css中的背景圖片

background-image:url(./images/img.jpg)

2.html中<img>標籤

<img src="./imges/img.jpg">

3.js中的路徑賦值

const img=getElementByTagName('img')[0];
img.src="./imges/img.jpg"

問題及解決

  web項目中圖片引用的三種方式中，按照url-loader的配置步驟，css中背景圖片、html標籤引用都能順利打包，只有js中出現問題。

問題：在js中，路徑被當作字符串賦值給了src屬性，webpack也將其當作字符串直接解析，所以，將項目打包至目的文件夾後，圖片的路徑引用出現問題。

例如：以下是一個項目的目錄結構，源文件都放在src文件夾中，webpack打包以後的文件夾dist。webpack將圖片路徑當作字符串打包以後，dist/index.html與src/index.html中的圖片引用路徑同樣，所以dist/index.html就找不到圖片。

解決：將圖片路徑當作模塊載入---require

const img=getElementByTagName('img')[0];
img.src=require("./imges/img.jpg")

至此，webpack可以正常打包css、html<img>、js中的圖片引用。