快捷導(dǎo)航

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

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

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

loader

loader 其實(shí)就是一個(gè)函數(shù)，會返回處理文件的結(jié)果
當(dāng)webpack解析資源時(shí)，會調(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中添加異步代碼程序會報(bào)錯(cuò) The callback was already called（已調(diào)用回調(diào) ）再次調(diào)用就會報(bào)錯(cuò)

// 第一種
module.exports = function (context,map,meta){
    console.log(context)
    return context
}
// 第二種  （如有下一個(gè)loader 需要處理可以采用這種）
module.exports = function (context,map,meta){
    // 一個(gè)參數(shù)  如果有錯(cuò)誤信息，就傳錯(cuò)誤信息  如果沒有  就是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
需要暴露一個(gè) pitch方法
當(dāng)在 use 中設(shè)置多個(gè)loader時(shí)，執(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)文章！

您可能感興趣的文章: