欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack5新特性Asset?Modules資源模塊詳解

 更新時(shí)間:2023年03月02日 11:22:16   作者:大眾浴池之大眾  
這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

正文

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)決策,理論上一些小的svg要寫到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)容處理成JSstring數(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)物車中刪除選中的商品功能

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車中刪除選中的商品功能,本文通過(guò)截圖實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2019-12-12
  • 詳細(xì)聊聊JavaScript是如何影響DOM樹構(gòu)建的

    詳細(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-08
  • javaScript使用EL表達(dá)式的幾種方式

    javaScript使用EL表達(dá)式的幾種方式

    這篇文章主要介紹了javaScript如何使用EL表達(dá)式,有哪幾種不錯(cuò)的方式,需要的朋友可以參考下
    2014-05-05
  • JS彈出窗口插件zDialog簡(jiǎn)單用法示例

    JS彈出窗口插件zDialog簡(jiǎn)單用法示例

    這篇文章主要介紹了JS彈出窗口插件zDialog簡(jiǎn)單用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了zDialog插件彈出窗口的基本使用方法與參數(shù)含義,需要的朋友可以參考下
    2016-06-06
  • JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法

    JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法

    這篇文章主要介紹了JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下
    2018-03-03
  • Webpack自動(dòng)清理打包目錄的實(shí)現(xiàn)

    Webpack自動(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-01
  • JavaScript中判斷整數(shù)的多種方法總結(jié)

    JavaScript中判斷整數(shù)的多種方法總結(jié)

    這篇文章主要介紹了JavaScript中判斷整數(shù)的多種方法總結(jié),本文總結(jié)了5種判斷整數(shù)的方法,如取余運(yùn)算符判斷、Math.round、Math.ceil、Math.floor判斷等,需要的朋友可以參考下
    2014-11-11
  • JavaScript中Array.from()的超全用法詳解

    JavaScript中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
  • JS分頁(yè)控件 可用于無(wú)刷新分頁(yè)

    JS分頁(yè)控件 可用于無(wú)刷新分頁(yè)

    今天無(wú)意看到了這個(gè)分頁(yè)控件,不過(guò)使用方法不是很清楚沒(méi)有研究,。大家可以自行研究,里面的函數(shù)寫法倒是不錯(cuò),需要內(nèi)容的結(jié)合
    2013-07-07
  • 原生JS實(shí)現(xiàn)拖拽功能

    原生JS實(shí)現(xiàn)拖拽功能

    這篇文章主要為大家介紹了JS實(shí)現(xiàn)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12

最新評(píng)論