Webpack构建之法，Loader

什么是loader

在我的理解webpack的 loarder相当于一个中间件，require('file!./test.coffee') 在执行require前，先执行file-loader，中间件可以被设定为一些过滤器，编译器等。现实的场景中，经常都被设定为文件编译器，将coffee文件编译成js文件。图片链接转换成cdn路径，过小的图片转换成base64格式。

用法

var moduleWithOneLoader = require("my-loader!./my-awesome-module");

!作为使用loader的标记，my-loader作为加载的loader模块名称。

require("./loaders/my-loader!./my-awesome-module");

除了使用绝对路径外，还可以使用相对路径作为loader。

require("style-loader!css-loader!less-loader!./my-styles.less");

除了使用单个loader外，还可以链式调用多个loader，上面例子中，首先经过less-loader，然后css-loader 如此类推，最后到style-loader。

require("loader?with=parameter!./file");

带参数到loader中。

除了在动态require的时候，能定义使用什么loader外，还可以通过配置文件来设定使用哪个loader

{
  module: {
    loaders: [
        { test: /\.coffee$/, loader: "coffee-loader" }
    ],
    preLoaders: [
        { test: /\.coffee$/, loader: "coffee-hint-loader" }
    ]
  }
};

上面例子，可以写在wepback配置文件中，当遇到coffee后缀的，调用coffee-loader。

使用loader加载顺序

分了三个级别，preloaders,loaders,postloaders，分别代表前中后，三个处理状态。除此外，webpack还提供require的额外定义。

• require("!raw!./script.coffee") 禁止preloaders生效。
• require("!!raw!./script.coffee") 禁止在配置文件中的所有加载器生效。
• require("-!raw!./script.coffee") 禁止loader和preloader，不禁止postloader

官方的建议

1. 对于预先编译的javascript（如coffee，es6等）和一些非js文件，在preloaders里面处理。
2. 对于javascript的loader建议在loader或preloader里面进行处理。
3. 建议preloader 和 postloader 的过程中，使用相同的语言。

以下是几个使用的例子

• preloader，图片压缩
• loader （配置文件），coffee-script转换成js
• postloader，代码覆盖率测试等。

开始编写自己的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);
    });
};