Webpack 5 走起! - Asset Modules(7) - asset/inline

前言

前面有講到 asset/resource 是屬於外部連結,但所謂的外部連結是什麼意思呢?所以這章節就會嘗試使用 asset/inline

asset/inline

前面章節我們知道使用 asset/resource 會產生將檔案搬移到我們指定的特定資料夾內,例如:dist 而如果我們有特別針對調整檔案名稱或者路徑的話,就有可能變成 dist/images/xxxx,而在此如果你剛才有嘗試打開編譯後的檔案 main.8d047b.bundle.js 其實可以看到一段 r.exports=e.p+"images/dd6880bd7cc1f8e807e2.jpg"} 這一段就是我們所打包編譯後的路徑,這就是 asset/resource 的特色,它的概念類似拷貝一份檔案,並且回傳紀錄外部連結路徑。

那麼 asset/inline 呢?這邊我先準備了另一張 .jpg 圖片,並且將原本的 asset/resource 改成以下設置(會這樣做主要是為了看出 asset/inlineasset/resource 差異

1
2
3
4
5
6
rules:[
{
test: /\.png/,
type: 'asset/resource'
}
],

接下來就是加入 ``asset/inline`

1
2
3
4
5
6
7
8
9
10
11
12
module: {
rules:[
{
test: /\.png/,
type: 'asset/resource'
},
{
test: /\.jpg/,
type: 'asset/inline'
}
],
},

那麼我們也必須回到 main.js 匯入該圖片

1
2
import testImg2 from './assets/images/surface-unsplash.jpg';
console.log(testImg2); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/AAAAF5jcHJ0AAABXAAAAAt3dHB0AAABaAAAABRia3B0AAABfAAAABRyWFlaAAABkAAAABRnWFlaAAABpAAAABRiWFlaAAABuAAAABRyVFJDAAABzAAAAEBnVFJDAAABzAAAAEBiVFJDAAABzAAAAEBkZXNjAAAAAAAAAANjMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0ZXh0AAAAAElYAABYWVogAAAA

接下來你輸入 npm run build 或者是 npm run dev 都可以看到出現一大串類似亂碼的東西,因為 asset/inline 的行為比較偏向將圖片直接注入到 JavaScript 中,所以就會看到這一大串亂碼,而這過程為了注入到圖片內,所以就會被轉換成 base64,因此通常這個 asset/inline 會比較常見用於 svg 檔案比較多,如果用一般的圖片檔案,則會太大唷。

除此之外你也可以透過執行 npm run build 編譯出來的資料夾注意到使用 asset/inline 打包編譯的檔案並不會如同 asset/resource 一樣打包編譯出檔案並放在特定路徑內,而是直接 注入 到檔案內。

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ