babel原理_Loader学习，简析babel-loader

什么是Loader?

继上两篇文章webpack工作原理介绍（上篇、下篇）,我们了解到Loader：模块转换器，也就是将模块的内容按照需求装换成新内容，而且每个Loader的职责都是单一，只会完成一种转换，所以我们一般对源文件的处理，也是由多个Loader以链式顺序执行的方式来进行多次装换，然后得到我们要的结果。

那么这样Loader只需要关心输入和输出，Loader其实是一个Node.js模块，该模块导出的是一个函数（意味着，所有node.js的api我们都可以使用），如下：

module.exports = function (source) {
    
        // 对source做一系列的转换
        return source;
    }

下面我们介绍一下webpack提供了哪些供Loader调用的api，对Loader有个比较深刻的理解，然后来分析babel-loader的源码，看看我们常用的loader是怎么编写出来的。

获得Loader的options

const loaderUtils = require('loader-utils');
    module.exports = function(source) {
    
        // 获取用户为当前Loader传入的options
        console.log(loaderUtils.getOptions(this));
        return source;
    }

返回其他结果

如上，我们返回的是转换后的内容，但是有些情况下，我们不仅仅需要返回转换后的内容，还需要返回一些其他的内容，如sourceMap或是AST语法树，那么这时候我们可以使用webpack提供的APIthis.callback，当使用this.callback了，那么我们就必须需要在Loader函数返回undefined,以此来让webpack知道返回的结果在this.callback中，API详细参数如下：

this.callback(
        // 无法装换原内容时的Error
        err: Error || null,
        // 装换后的的内容，如上述的source
        content: string | Buffer,