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/inline
與 asset/resource
差異
1 | rules:[ |
接下來就是加入 ``asset/inline`
1 | module: { |
那麼我們也必須回到 main.js 匯入該圖片
1 | import testImg2 from './assets/images/surface-unsplash.jpg'; |
接下來你輸入 npm run build
或者是 npm run dev
都可以看到出現一大串類似亂碼的東西,因為 asset/inline
的行為比較偏向將圖片直接注入到 JavaScript 中,所以就會看到這一大串亂碼,而這過程為了注入到圖片內,所以就會被轉換成 base64,因此通常這個 asset/inline
會比較常見用於 svg 檔案比較多,如果用一般的圖片檔案,則會太大唷。
除此之外你也可以透過執行 npm run build
編譯出來的資料夾注意到使用 asset/inline
打包編譯的檔案並不會如同 asset/resource
一樣打包編譯出檔案並放在特定路徑內,而是直接 注入 到檔案內。