webpack使用file-loader與url-loader處理圖檔資源加載

• 一、使用file-loader加載圖檔資源
• 二、使用url-loader加載圖檔
• 三、打包後圖檔路徑不對的問題
• 四、使用傳統方式加載圖檔

一、使用file-loader加載圖檔資源

安裝file-loader

yarn add file-loader --dev

配置

module:{
        rules:[
            {
                test:/.jpg|.png$/,
                use:'file-loader'
            }
        ]
    }
           

index.js中引用圖檔

import icon from "../images/img.jpg"
import icon2 from "../images/icon.png"

const img2 = new Image()
img2.src = icon2
img2.classList.add('img')
document.body.append(img2)

const img = new Image()
img.src = icon
img.classList.add('img')
document.body.append(img)
           

打包

yarn webpack

，檢視效果

二、使用url-loader加載圖檔

安裝

yarn add url-loader --dev

配置webpack.config.js

module:{
        rules:[
            {
                test:/.jpg|.png$/,
                use:{
					loader:"url-loader",
					options:{
						limit: 10 * 1024 // 這裡的機關是位元組，限制大小為10kb
						// 設定後url-loader就隻會将10kb以下的檔案轉換為 Data URLs形式
						// 超過10kb的檔案仍然會使用file-loader打包
						// 注意：使用這種方式使用url-loader的話，必須要安裝file-loader
						// 因為url-loader對超出的檔案會去調用file-loader
					}
				}
            }
        ]
    }
           

打包後頁面正常顯示，控制台可以看出不一樣的地方。

png圖檔小于10kb，被url-loader轉換成了base64格式。使用url-loader處理圖檔資源,會把其轉換成base64,就不會再生成圖檔在dist目錄下

三、打包後圖檔路徑不對的問題

有些朋友可能因為webpakc或者loader版本的問題，打包後圖檔可能路徑不對，少了目錄名，可以在webpack.config.js中的output添加publickPath屬性指定網站根目錄為 dist/ ，一般就能解決了。

module.exports = {
    mode:'none',
    entry:"./src/main.js",
    output:{
        filename:"bundle.js",
        path:path.join(__dirname, "dist"),
        publicPath:"dist/" // 配置網站根目錄,打包後圖檔路徑不對可能就是路徑問題,可以通過此方案解決
    }
    ...
}
           

四、使用傳統方式加載圖檔

通過建立DOM節點，指定img的src屬性和a标簽的href屬性，同樣可以找到圖檔。

const imgTag = document.createElement("img")
imgTag.classList.add("img")
imgTag.src = "../images/img.jpg"
document.body.append(imgTag)

const aTag = document.createElement("a")
aTag.textContent = "this is jpg image"
aTag.href = "../images/img.jpg"
document.body.append(aTag)
           

但是可以看到，這個路徑找的還是我們開發環境下的圖檔目錄，webpack并沒有将引用到的圖檔資源打包到dist目錄中，如果是線上環境，這張圖檔應該就是通路不到的。

暫時還是推薦前面的那種用法，webpack會自動根據圖檔資源的加載去打包圖檔。