webpack使用自定义loader

配置的loader也可以改为
 

module:{
        rules:[
               {
                 test:/\.js/,
     use:[
         {
          loader:path.resolve(__dirname,"./loaders/replaceLoader.js"),
           options:{
                             name:'lee'
                           }
         },
         {
                   }
                  ]
                  //使用自己定义的loader
                 
               }
          ]
     }
 }

//通过query就可以拿到name是lee的数据，replaceLoader.js中的内容

module.exports=function(source/*引入的源代码*/){
   return source.replace('dell',this.query.name)//把替换的内容改为loader中定义的内容
  }

编写loader的官网：https://webpack.js.org/api/loader/

//我们自己编写loader，官方提供了loader-util ，帮助我们编写loader
//安装命令
npm i loader-utils --save-dev

// replaceLoader.js中的内容

//引入loader-utils

const loaderUtils= require('loader-utils');
module.exports=function(source/*引入的源代码*/){
   //使用引入的loader
     const options = loaderUtils.getOptions(this)//自动帮我们分析this.query
   return source.replace('dell',options.name)//把替换的内容改为loader中定义的内容
  }

//可以打包运行测试 npm run build

//replaceLoader.js中新配置
使用this.callback，把sourceMap带出去。

this.callback(
  err:error|null,
  content:string|Buffer,
  sourceMap?:SourceMap,
  meta?:any
)

module.exports=function(source/*引入的源代码*/){
   //使用引入的loader
     const options = loaderUtils.getOptions(this)//自动帮我们分析this.query
  //替换这一部分内容 return source.replace('dell',options.name)//把替换的内容改为loader中定义的内容
  this.callback(null,result)//等价于return，要传递源代码出去，return就不好用了，要用calback
  }

异步操作的使用
使用 async

const calback=this.async();//再replaceLoader.js中使用异步要用 
callback(null,/*返回的结果*/)//可以返回多个

//replaceLoader.js中新配置

const loaderUtils=require("loader-utils");
module.exports=function(source){
 const options=loaderUtils.getOptiions(this)
 const callback=this.async();
 setTimeout(()=>{
        const result=source.replace('dell',options.name);
        calback(null,result);
 },1000)
}

//使用异步操作之后打包。 npm run build

//replaceLoader.js中新配置

const loaderUtils=require("loader-utils");
module.exports=function(source){
 return source.replace('lee','world');
}

//使用多个loader
配置的loader也可以改为
 

//replaceLoader.js中新配置

const loaderUtils=require("loader-utils");
module.exports=function(source){
 const options=loaderUtils.getOptiions(this)
 const callback=this.async();
 setTimeout(()=>{
        const result=source.replace('dell',options.name);
        calback(null,result);
 },1000)
}

module:{
        rules:[
               {
                 test:/\.js/,
     use:[
         {
          loader:path.resolve(__dirname,"./loaders/replaceLoader.js"),
           options:{
                             name:'lee'
                           }
         },
                      path.resolve(__dirname,'./loaders/replaceLoaderAsync.js')
         {
                   }
                  ]
                  //使用自己定义的loader
                 
               }
          ]
     }
 }