webpack5新特性Asset?Modules資源模塊詳解
正文
webpack
可以將很多類型的文件寫入最后打包的js
文件,寫入的方法有兩種,一個(gè)是 Asset Modules
另一個(gè)是 Loaders
這一篇我們就來(lái)討論 Asset Modules
。Asset Modules
(資源模塊)是webpack5
的新特性,它允許使用資源文件(字體,圖標(biāo)等)而無(wú)需配置額外 loader, webpack低版本的處理方式以及詳情參考官方文檔。
資源模塊類型(asset module type),通過(guò)添加 4 種新的模塊類型, 下面引入官文的一部分來(lái)直接介紹。
asset/resource
發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。之前通過(guò)使用file-loader
實(shí)現(xiàn)。asset/inline
導(dǎo)出一個(gè)資源的 data URI。之前通過(guò)使用url-loader
實(shí)現(xiàn)。asset/source
導(dǎo)出資源的源代碼。之前通過(guò)使用raw-loader
實(shí)現(xiàn)。asset
在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇。之前通過(guò)使用url-loader
,并且配置資源體積限制實(shí)現(xiàn)。
圖片打包(asset/resource)
將一張圖片(jpg/png/jpeg)放在工程文件夾里, 然后寫一個(gè)加載圖片的函數(shù),生產(chǎn)一個(gè)圖片元素,設(shè)置其src等屬性,再掛載到body上。文件目錄如下
src/ addImg.js cat.jpeg index.js
addImg.js
的內(nèi)容如下
import CatImg from './cat.jpeg'; function addImg () { const img = document.createElement('img'); img.alt = 'Cat'; img.width = 300; img.src = CatImg; const body = document.querySelector('body'); body.appendChild(img); } export default addImg;
這里import
一個(gè)jpeg
后綴的文件,webpack
是不知道該如何處理的,我們需要通過(guò)wepack.config.js
配置
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, './dist') }, mode: 'none', module: { rules: [ { test: /\.(png|jpg|jpeg)/, type: 'asset/resource' } ] } }
npm run build
之后在瀏覽器打開html文件,會(huì)發(fā)現(xiàn)圖片已經(jīng)在頁(yè)面上渲染了,再觀察打包之后的dist文件夾,圖片數(shù)據(jù)也在其中,這就是以assert/resource
方式打包的結(jié)果,簡(jiǎn)單講圖片打包進(jìn)入了dist
文件夾, 這和后邊的asset/inline
(后面會(huì)介紹)的方式有直接區(qū)別。
publicPath
剛才打包的結(jié)果,如果打開瀏覽器控制臺(tái),可以看見img元素的src地址指向了一個(gè)本地的絕對(duì)路徑
這個(gè)路徑是如何指定的呢?是通過(guò)output
屬性下的publicPath
, 其默認(rèn)值是 "auto"
, 可以試一下配置了是通過(guò)output屬性下的publicPath: "auto"
和剛才的打包結(jié)果是一樣的,那么如果想使用相對(duì)路徑,在本例中用html文件的相對(duì)路徑去指定圖片的src publicPath: 'dist/'
,打包后同樣可以成功渲染圖片,但是觀察其img的src的指向已經(jīng)發(fā)生了變化,使用的相對(duì)路徑。
比如實(shí)際項(xiàng)目,靜態(tài)資源會(huì)打包到cdn
服務(wù)器上,那么可以配置 publicPath
為一個(gè)具體的cdn
地址,如 http://somecdn.com/someasset/
, 那么其靜態(tài)資源路徑前綴就會(huì)是這個(gè)地址。
asset/inline 模塊
接著上面的部分,inline
主要區(qū)別的于 resource
是打包的結(jié)果,inline會(huì)將文件直接以base64
的方式寫入最后產(chǎn)出的bundle.js 一般情況下,對(duì)于一些svg
文件使用inline
的方式打包是比較合理的,當(dāng)然對(duì)于較大的圖片也不是不行,只不過(guò)最后bundle.js的體積會(huì)變大,這在生產(chǎn)環(huán)境不是很理想。
改寫對(duì)于圖片類數(shù)據(jù)打包的方式為 type: 'asset/inline'
可以從控制臺(tái)看出打出的包體積變大了,且打開bundle.js看的話會(huì)看見base64
的部分
那么結(jié)論就是這兩種打包方式各有利弊,inline雖然把數(shù)據(jù)寫入到js
文件中,但也減少了一次網(wǎng)絡(luò)請(qǐng)求。還是要根據(jù)實(shí)際的生產(chǎn)需求來(lái)決策,理論上一些小的sv
g要寫到bundle
中,而大圖是分包部署在cdn
服務(wù)上比較合理。
asset 模塊
上面的兩種設(shè)定都指定了一種絕對(duì)的方法,那么有沒(méi)有更靈活的方式呢?就是asset
類型的處理方式。將圖片文件處理的方式改為 type: 'asset'
, 這會(huì)根據(jù)資源的大小來(lái)決定是以inline的方式還是以recource的方式進(jìn)行打包,其默認(rèn)值閥值是8kb
, 如果文件大小小于8kb
,那么文件將以inline
的方式進(jìn)行打包,反之則相當(dāng)于recource
的方式。當(dāng)然我也可以改寫閾值:
module: { rules: [ { test: /\.(png|jpg|jpeg)/, type: 'asset', parser: { dataUrlCondition: { maxSize: 3 * 1024 // 3kb } } } ] }
asset/source 模塊
source
類型一般處理一些文本數(shù)據(jù),可以將內(nèi)容處理成JS
的string
數(shù)據(jù),比如處理txt
文件, webpack配置如下
catAlt.txt 文件只有一段字符串
文件引入并以字符串形式調(diào)用
可以執(zhí)行打包看最后的結(jié)果,txt
里的內(nèi)容以字符串的形式插入到了img.alt
屬性上
以上就是webpack5新特性Asset Modules資源模塊詳解的詳細(xì)內(nèi)容,更多關(guān)于webpack5特性Asset Modules的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車中刪除選中的商品功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車中刪除選中的商品功能,本文通過(guò)截圖實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12詳細(xì)聊聊JavaScript是如何影響DOM樹構(gòu)建的
DOM (Document Object Model) 的全稱是文檔對(duì)象模型,它可以以一種獨(dú)立于平臺(tái)和語(yǔ)言的方式訪問(wèn)和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于JavaScript是如何影響DOM樹構(gòu)建的相關(guān)資料,需要的朋友可以參考下2021-08-08JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法
這篇文章主要介紹了JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2018-03-03Webpack自動(dòng)清理打包目錄的實(shí)現(xiàn)
本文主要介紹了Webpack自動(dòng)清理打包目錄的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01JavaScript中判斷整數(shù)的多種方法總結(jié)
這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結(jié),本文總結(jié)了5種判斷整數(shù)的方法,如取余運(yùn)算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下2014-11-11JavaScript中Array.from()的超全用法詳解
Array.from方法用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對(duì)象(array-like?object)和可遍歷(iterable)的對(duì)象(包括?ES6?新增的數(shù)據(jù)結(jié)構(gòu)?Set?和?Map),別忘記就來(lái)講講他的具體用法吧2023-03-03