Webpack 5 走起! - Asset Modules(6) - asset/resource
前言
接下來將會關於靜態資源的部分,也就是圖片的搬移等。
Asset Modules (資產庫模組 or 存取模組)
Asset Modules 是 Webpack 5 新增的功能,其實如果你在 file-loader 的文件頁面下會看到這一句話
DEPRECATED for v5: please consider migrating to asset modules.
簡單來講就是 Webpack 5 已經棄用部分 loader 的方式,例如: url-loader、raw-loader 也是會看到這一條 「DEPRECATED for v5: please consider migrating to asset modules.」。
所以這一章節就來介紹一下 Asset Modules(資產庫模組 or 存取模組),在 Webpack 4 的時候我們都必須使用一些 Loader 模組來處理一些靜態資源,舉凡字型、圖片等。
而 Asset Modules 只要透過以下 Modules 來取代所有 loader
asset/resource
- 對應 Webpack 4 的 file-loader,asset/resource
用途會比較偏向直接搬移檔案並外部連結到該檔案。asset/inline
- 對應 Webpack 4 的 url-loader,asset/inline
比較像是注入在這個檔案裡面,因此類似內部連結。asset/source
- 對應 Webpack 4 的 raw-loaderasset
- 對應 Webpack 4 的 url-loader
因此接下來可以在 src 底下建立一個 assets/images 資料夾放置一張 .jpg
圖片,因此搬移圖片我們通常是使用 file-loader,那麼現在則改成以下
1 | const path = require('path'); |
接下來在 src/main.js 匯入該圖片
1 | import testImg from './assets/images/brent-dalling-unsplash.png'; |
接下來當你輸入 npm run build
應該就會看到 dist 底下出現你引入的圖片,如果使用 npm run dev
則可以看到 console.log
結果。
如果你希望是希望將常見的圖片都統一匯入的話,只需要將 test: /\.jpg/,
改成 test: /\.(png|jpg|gif)$/i,
就可以了。
接下來應該會發現我們匯入的圖片檔案是在 dist 資料夾,但我們通常開發編譯出來的圖片都會是在相對應的資料夾,例如圖片就在 dist/images 底下,那麼這一點只需要針對 output 增加一個 assetModuleFilename
就可以做到,而 assetModuleFilename
概念類似預設統一 Asset Module 輸出路徑
1 | output: { |
那麼以上就是最簡單的 asset/resource
設置,而結果就跟 file-loader 相同,可是可以看到撰寫方式簡潔相當多,在此你也可以回顧看一下原本的設置方式可能是這樣子
1 | module.exports = { |
參數說明
其實這邊有點跳痛沒有解釋 module
屬性中的 rules
、test
與 type
,因此最後這邊就補充一下
rules
: 編譯 or 打包的規則,是一個陣列物件test
: 通常是一個 regex(正規表達式)type
: 你要使用的 Asset Modules 類型,通常有asset/resource
、asset/inline
、asset/source
與asset