快捷導(dǎo)航

JavaScript loader原理簡單總結(jié)示例解析

更新時間：2023年08月25日 11:22:44 作者：loong

這篇文章主要為大家介紹了JavaScript loader原理簡單總結(jié)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

loader

loader 其實就是一個函數(shù)，會返回處理文件的結(jié)果
當(dāng)webpack解析資源時，會調(diào)用相應(yīng)的loader 去處理（從下往上，從右往左的順序調(diào)用）

// context 文件內(nèi)容
// map SourceMap （傳入SourceMap傳入的相關(guān)數(shù)據(jù)）
// meta 其他loader 傳的參數(shù)
module.exports = function (context,map,meta){
    console.log(context
    return context
}

同步loader

如果在同步loader中添加異步代碼程序會報錯 The callback was already called（已調(diào)用回調(diào) ）再次調(diào)用就會報錯

// 第一種
module.exports = function (context,map,meta){
    console.log(context)
    return context
}
// 第二種  （如有下一個loader 需要處理可以采用這種）
module.exports = function (context,map,meta){
    // 一個參數(shù)  如果有錯誤信息，就傳錯誤信息  如果沒有  就是null
    // context 文件內(nèi)容
    // map SourceMap （傳入SourceMap傳入的相關(guān)數(shù)據(jù)） 繼續(xù)傳遞 SourceMap
    // meta 其他loader 傳的參數(shù)
    this.call(null, context, map, meta)
}

異步loader

module.exports = function (context,map,meta){
    const callback = this.async()
    setTimeout(()=>{
        callback(null, context, map, meta)    
    }, 1000)
}

raw Loader

raw loader接收的context 是 Buffer 數(shù)據(jù) （二進(jìn)制數(shù)據(jù)）
同步loader 和異步loader 都可以
需要配置 module.exports.raw = true

module.exports = function loader(context,map,meta){
    console.log(context)
    return context
}
module.exports.raw = true

pitch Loader

pitch loader 中可以是異步loader 和同步loader
需要暴露一個 pitch方法
當(dāng)在 use 中設(shè)置多個loader時，執(zhí)行順序是先執(zhí)行 pitch loader pitch loader 執(zhí)行完了會再執(zhí)行普通loader

module.exports = function loader(context,map,meta){
    console.log(context)
    return context
}
module.exports.pitch = function (){
    console.log(pitch)
}

以上就是JavaScript loader原理簡單總結(jié)示例解析的詳細(xì)內(nèi)容，更多關(guān)于JavaScript loader原理總結(jié)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

為什么我們要做三份 Webpack 配置文件
前端從開發(fā)到部署前都離不開 Webpack 的參與，本文結(jié)合了我們自己在開發(fā)中碰到的種種問題解決方案，同時借鑒了很多開源項目的配置來介紹一種用 3 個 JS 文件來配置 Webpack 的方法。
2017-09-09
requestAnimationFrame定時動畫屏幕刷新率節(jié)流示例淺析
這篇文章主要為大家介紹了requestAnimationFrame定時動畫屏幕刷新率節(jié)流示例淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
基于遷移學(xué)習(xí)的JS目標(biāo)檢測器構(gòu)建過程詳解
這篇文章主要為大家介紹了基于遷移學(xué)習(xí)的JS目標(biāo)檢測器構(gòu)建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
微信公眾號提示：Unauthorized API function 問題解決方法
這篇文章主要介紹了微信公眾號提示：Unauthorized API function 問題解決方法的相關(guān)資料,這里提供了出現(xiàn)提示的解決方法，需要的朋友可以參考下
2016-12-12
JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict，嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集，它在語義上與正常的代碼有明顯的差異，下面我們就一起來學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下
2021-12-12
打包非 JavaScript 靜態(tài)資源詳情
這篇文章主要介紹了打包非 JavaScript 靜態(tài)資源，打包工具中的自定義導(dǎo)入，種常見的方法是利用已有的靜態(tài)導(dǎo)入語法。有些打包工具可能會通過文件擴(kuò)展名來自動檢測格式，而有些其他打包工具則允許插件使用自定義的 URL Scheme，下面具體內(nèi)舉例說明,需要的朋友可以參考一下
2021-10-10
超級強(qiáng)大的表單驗證
超級強(qiáng)大的表單驗證...
2006-06-06
在微信小程序中渲染HTML內(nèi)容3種解決方案及分析與問題解決
在開發(fā)微信小程序時我們會在小程序內(nèi)加入純HTML代碼，且HTML中包括圖片，視頻，甚至是事件，微信小程序為我們提供了3種解決方法，但它們的功能與實現(xiàn)方式與最終效果并不理想
2020-01-01
web?worker在項目中的使用學(xué)習(xí)為項目增加亮點(diǎn)
這篇文章主要為大家介紹了web?worker使用學(xué)習(xí)來為你的項目增加亮點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
鼠標(biāo)劃過時整行變色
鼠標(biāo)劃過時整行變色...
2006-06-06