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

發表於 2021-03-07 分類於 Webpack

Google AD

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

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

前面有講到 asset/resource 是屬於外部連結，但所謂的外部連結是什麼意思呢？所以這章節就會嘗試使用 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/inline 與 asset/resource 差異

rules:[
  {
    test: /\.png/,
    type: 'asset/resource'
  }
],

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

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 一樣打包編譯出檔案並放在特定路徑內，而是直接注入到檔案內。

參考文獻

Asset Modules