JavaScript loader原理简单总结示例解析
作者：loong
这篇文章主要为大家介绍了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 = truepitch 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)
}以上就是JavaScript loader原理简单总结示例解析的详细内容，更多关于JavaScript loader原理总结的资料请关注脚本之家其它相关文章！