关于javascript:自己简单总结的-loader-原理

loader

• loader 其实就是一个函数，会返回解决文件的后果
• 当 webpack 解析资源时，会调用相应的 loader 去解决（从下往上，从右往左的顺序调用）

// context 文件内容
// map SourceMap（传入 SourceMap 传入的相干数据）// meta 其余 loader 传的参数

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

同步 loader

• 如果在同步 loader 中增加异步代码 程序会报错 The callback was already called（已调用回调）再次调用 就会报错

// 第一种
module.exports = function (context,map,meta){console.log(context)
    return context
}

// 第二种（如有下一个 loader 须要解决能够采纳这种）module.exports = function (context,map,meta){
    // 一个参数  如果有错误信息，就传错误信息  如果没有  就是 null
    // context 文件内容
    // map SourceMap（传入 SourceMap 传入的相干数据）持续传递 SourceMap
    // meta 其余 loader 传的参数
    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 数据（二进制数据）
• 同步 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 办法
• 当在 use 中设置多个 loader 时，执行程序是 先执行 pitch loader pitch loader 执行完了会再执行一般 loader

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

有什么总结不到位请大佬们帮忙补充下