编写 webpack loader（一）

用过webpack的人都知道处理各种资源的时候要用到loader，比如babel-loader可以将ES6转化为ES5，less-loader可以编译less文件等。

但是loader到底是什么？自己如何去编写一个loader? 带着这两个问题，我去看了官方文档。这篇文章就是记录下自己的学习，如有不准确或不正确的地方，欢迎大家指正。

本文主要讲的是如何编写一个loader，所以不会详细讲loader的使用。

loader是什么？

关于loader到底是什么，官方有一段话：

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

大概翻译一下：

Loaders就是对一个模块源码的转换。它们可以在引入或加载文件时对文件进行预处理。因此loaders有点像其他构建工具中的tasks（任务），可以提供一种有力的方式去处理前端构建步骤。Loaders可以将一种不同类型的语言（比如TypeScript）转换为JavaScript，或者将内嵌图片转换为 data URLs。甚至可以在JavaScript模块中直接引入CSS文件。

简单点说，loader就是用来对各种资源进行转换。

编写loader

重点来了，就是怎样去编写一个loader。

A loader is a node module that exports a function. This function is called when a resource should be transformed by this loader. The given function will have access to the Loader API using the thiscontext provided to it.

还是翻译一下：

loader就是一个node模块，它输出了一个函数。当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。

所以loader大概就是这样一个JavaScript文件：

module.exports  = function(src){
  //可以通过 this 访问Loader API
  //this是由webpack提供的，可以直接使用
}

在动手写之前，我们要知道一个重要的知识点：处理一个文件可以使用多个loader，loader的执行顺序是和本身的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行。第一个执行的loader接收源文件内容作为参数，其他loader接收前一个执行的loader的返回值作为参数。最后执行的loader会返回此模块的JavaScript源码。这里可能不太容易理解，没关系，继续往下看。

下面我们来编写一个简单的loader，就叫reverse-txt-loader吧，功能就是对txt文件的内容反转。我们有个test.txt，内容为abcde。
在webpack中这样使用：

其中loader的路径以实际为准。可以看到，处理txt文件是只用了一个loader，所以reverse-txt-loader既是第一个也是最后一个loader，根据上面说的，此loader会接收原文件内容作为参数，会返回JavaScript源码。所以reverse-txt-loader.js是这样：

module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join(''); //edcba
  //返回JavaScript源码，必须是String或者Buffer
  return `module.exports = '${result}'`;
}

为什么会返回这样子的一个字符串呢？因为我们要使用某个文件时，比如test.txt，会这样 var text = require('./test.txt')，参考下nodejs就明白了。

上面也可以调用loader API返回：

module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join('');//edcba
  //返回JavaScript源码，必须是String或者Buffer
  this.callback(null, `module.exports = '${result}'`);
  return;
}

下面我们又有一个新需求，就是在反转前将首字符转为大写。当然，我们可以在一个loader里实现这两个功能，但更好的做法是分开写，一个loader实现一个特定的功能，有利于复用。所以，我们再写一个loader，就叫uppercase-first-loader吧。

因为需求是要先将首字符转换为大写，所以uppercase-first-loader应该先执行，根据我们之前说的loader的执行顺序，uppercase-first-loader应该位于reverse-txt-loader之后。
在webpack中是这样：

uppercase-first-loader.js代码是这样：

module.exports = function(src) {
  //因为是第一个loader，所以src是原文件内容（abcde），下面对内容进行处理，这里首字符大写
  if(!src) {
    return ''; 
  }
  var result = src.charAt(0).toUpperCase() + src.slice(1); //Abcde
  //返回结果给下一个loader
  return result;
}

reverse-txt-loader.js代码不变，但接收的参数不再是原文件内容了，而是uppercase-first-loader返回的内容。

现在我们已经知道了loader怎么写了，但目前的loader都是同步的，也没有传其他参数，这部分会单独再说。

因为表达能力有限，所以肯定有表达不清楚或不正确的地方，欢迎提出。

编写 webpack loader（一）