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

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)文章！

相關(guān)文章

最新評論