什么是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
官方的建议
- 对于预先编译的javascript（如coffee，es6等）和一些非js文件，在preloaders里面处理。
- 对于javascript的loader建议在loader或preloader里面进行处理。
- 建议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);
});
};
