webpack开发loader

一.loader的作用

webpack打包最后生成的是js文件，loader主要是帮助webpack将非js文件转换为js格式编写，或者将高版本js降级为低版本js语法，用于兼容旧时代浏览器。

二.简单介绍一下loader

1.同步loader，从上到下顺序执行，没有异步事件
示例：

module.exports = function(content,map,meta){
    // 同步方式
    // 第一种方式
    return content
    // 第二种方式,可以向下一个loader传递参数和报错处理
    this.callback(null,content,map,meta)
} 

2.异步loader，在异步事件中处理
示例：

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

3.处理buffer流文件的loader,返回二进制数据
示例：

module.exports = function(content){
   return content
}
module.exports.raw = true

4.有pitch函数的loader，这个主要用来做处理熔断，执行顺序：先执行从上到下loader中的pitch函数，然后再往反方向执行暴露的loader函数

module.exports = function(content){
   return content
}
module.exports.pitch= function(){
	// return之后，后面的pitch不执行，并且直接回到前一个loader的处理函数
   return "xxx"
}

三.一个简单的loader示例

定义一个loader文件bannel-loader.js

module.exports = function(content,map,meta){
    console.log(content);
    /* 
    1.第一个参数是error
    2.第二个参数是读取内容
    3.第三个参数是生成的source-map
    4.第四个参数是给下一个loader的参数 
    */
    // 同步方式
    this.callback(null,content,map,meta)
    // 异步方式
    const callback = this.async()
    setTimeout(()=>{
        // 同上
        callback(null,content,map,meta)
    },1000)
} 

在webpack配置文件使用

module:{
   rules:[
         {
             test: /\.js$/,
             loader:'./loader/bannel-loader.js'
         }
     ]
 },