webpack loader

http://webpack.github.io/docs/loaders.html

1. 原则 / 工作

首先，我们应该明白webpack loader是如何工作的，以及他秉承着什么原则进行工作

loader: 'style!css!sass'

这是一段用于打包css文件的loader说明，可以看出loader是可以链式进行，并且从右到左的 （sass -> css -> <style>）

前一个loader在工作完成后，将其工作结果作为输入到下一个Loader继续进行工作。

所以每一个loader都应该有明确的输入&输出

a. 允许链式

b. 明确的输入 & 输出

在这种划分下，我们自然可以让每个loader只完成一部分功能，将打包这一过程的颗粒度降低。

c. 职责明确

2. Loader是什么

Writing a loader is pretty simple. A loader is just a file that exports a function. The compiler calls this function and passes the result of the previous loader or the resource file into it. 

正如官网所说，loader其实是也是一个模块，需要export一个方法，编译器将使用这个方法，并且将上一个loader的计算结果传到这个方法。

这也就是说，loader也可以引用其他模块。

官网也介绍了同步/异步两种方式

module.exports = function(content) {    return someSyncOperation(content);};

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

异步方式，使用callback的方式，异步地回调计算结果。

相似的，必须要有计算结果最终返回，也会有上一个loader的计算结果传入。

3.API

当然通过loader的配置中可以添加一些参数，而这些参数会被set到this下。

require("./loader1?xyz!loader2!./resource?rrr");

例如这一个url, 对于resource-loader而言

this.version = 1

this.query = rrr

this.request = ./loader1?xyz!loader2!./resource?rrr

同时也提供了一些公用方法：

this.emitFile() 输出文件

this.exec() 执行代码

4.loader-utils

https://github.com/webpack/loader-utils

loader-utils是一个工具包，封装了大部分loader的公用方法

例如：

parseQuery 能够将query解析成一个{}

interpolateName 能够按照规则生成一个文件名

以及URL处理方法等等