Webpack-源码四，从源码分析如何写一个loader

从黑盒和白盒两个角度讲讲如何写一个loader以及loader这个东西是如何在webpack中运作起来的。loader相当于一个翻译器，具体的loader会有很大不同，比如less-loader和ejs-loader内部代码肯定差异极大，这里只以最简单的loader举例，入坑以后大家根据自己需求自行探索。

本系列所有博客的测试代码可以点击。

从黑盒角度学习写一个loader

所谓黑盒角度，就是我把webpack的运作过程当作一个黑盒，只从官网学习API。

官网API

官网告诉我们，loader就是一个export出来的function，这个函数接受的参数是源文件的字符串，返回经过“翻译”后的文件。这个过程可以是异步的。在函数内部，可以通过this获得loader API上的内容。

例如：有多个结果的同步loader，多个结果指该loader不仅返回翻译后的文件，还需要执行一系列操作返回其他结果。

module.exports = function(content) {
   
    this.callback(null, someSyncOperation(content), sourceMaps, ast);
    return; // always return undefined when calling callback()
};

例如：异步loader

module.exports = function(content) {
   
    var callback = this.async();
    someAsyncOperation(content, function(err, result) {
   
        if(err) return callback(err);
        callback(null, result);
    });
};

例如：有多个结果的异步loader

module.exports = function(content) {
   
    var callback = this.async();
    someAsyncOperation(content, function(err, result, sourceMaps, ast) {
   
        if(err) return callback(err);
        callback(null, result, sourceMaps, ast);
    });
};

不再举例，API很简单，大家可以自己看看。

一个最简单的loader

下面写一个最简单的loader，仅返回源文件原文，捋顺一下写loader的流程。

webpack.config.js中进行配置

 module: {
         //加载器配置
        loaders:[
         {
            test: /\.tpl\.html$/,
            loader: 'html-template-loader'
         }
         ]
     }

我要去找.tpl.html文件，打包前先通过我写的html-template-loader进行翻译。于是我现在文件中写一个test.tpl.html文件，并在index.js中require它。

// index.js
let tpl = require('./src/loaders/test.tpl.html');

// test.tpl.html