自定义加载器Loader

## 自定义加载器Loader

加载器Loader实质上是一个exports导出function的JS模块，它接收的入参为JS文件源码或者是上一个Loader导出的源码。

同步Loader

同步Loader的编写比较简单，只需要接收source参数，对source参数进行处理之后直接返回即可。如果是单参数Loader直接return即可，如果是多参数的Loader需要调用this.callback方法，将参数传递进去即可。

module.exports = function(source){
	return `${source}`
}
或者
module.exports = function(source){
	return syncFn(source)
}
复制代码

如果要传入多个参数，可以调用this.callback

module.exports = function(content, map, meta) {
  this.callback(null, someSyncOperation(content), sourceMaps, meta);
  return; // 当调用完callback后需要手动调用return
};
复制代码

异步Loader

异步Loader在需要执行异步操作时，需要调用this.async方法，传入源码。需要注意的是，this.async只是简单地封装了this.callback，两者的入参都是一样的。另外，最好在最开始就保存this.async指针，避免污染。

module.exports = function(content, map, meta) {
  var callback = this.async();
  someAsyncOperation(content, function(err, result) {
    if (err) return callback(err);
    callback(null, result, map, meta);
  });
};
复制代码

或者

module.exports = function(content, map, meta) {
  var callback = this.async();
  someAsyncOperation(content, function(err, result, sourceMaps, meta) {
    if (err) return callback(err);
    callback(null, result, sourceMaps, meta);
  });
};
复制代码

this

在Loader里的this参数，封装了webpack和loader runner的一些方法，允许将Loader执行异步方法，或者读取查询参数。

• this.callback

  可以接收多个参数，执行同步或者异步操作（异步操作需要调用this.async），它有四个默认参数：

  1. 如果进行错误处理时，传入错误标识Error，不然传入null即可。

  2. 可以是文件源码或者是上一个Loader输出的源码。支持string或者Buffer(需要设置Raw属性)。

  3. 可选项：如果需要sourceMap就传入SourceMap参数，不然为空。

  4. 可选项：可以传入任意值。

      this.callback{
      	err:Error | null,
      	content: string | Buffer,
      	sourceMap?: SourceMap,
        	meta?: any
      }
     复制代码

• this.async

  this.async简单地封装了this.callback，入参都一样，只是用来表示异步操作