Question

请教一个webpack中的url-loader问题

若以下回答无法解决问题，邀请你更新回答

Answer 1

　　Loader 是支持链式执行的，如处理 sass 文件的 loader，可以由 sass-loader、css-loader、style-loader 组成，由 compiler 对其由右向左执行，第一个 Loader 将会拿到需处理的原内容，上一个 Loader 处理后的结果回传给下一个接着处理，最后的 Loader 将处理后的结果以 String 或 Buffer 的形式返回给 compiler。

　　这种链式的处理方式倒是和 gulp 有点儿类似，固然也是希望每个 loader 只做该做的事，纯粹的事 ，而不希望一箩筐的功能都集成到一个 Loader 中。
　　
　　{
　　module: {
　　loaders: [{
　　test: /\.scss$/,
　　loader: 'style!css!sass'
　　}]
　　}
　　}；
　　另一方面，虽然链式之间可以依赖其前一个Loader所返回的结果来执行自己的内容。但这并不支持两个 Loader 之间进行数据交流的做法，一个标准的 Loader 应该是要求着 强独立性、以及输入什么，就输出什么的可预见性。
　　官网说了，A loader is a node module exporting a function.
　　既然是 node module，那么基本的写法可以是
　　// base loader
module.exports = function(source) {
return source;
};

　　如果你所写的 Loader 需要依赖其他模块的话，那么同样以 module 的写法，将依赖放在文件的顶部声明，让人清晰看到
　　?

　　1
　　2
　　3
　　4
　　5
　　
　　// Module dependencies.
　　var fs = require("fs");
　　module.exports = function(source) {
　　return source;
　　};
　　

　　上面使用返回 return 返回，是因为是同步类的 Loader 且返回的内容唯一，如果你希望将处理后的结果（不止一个）返回给下一个 Loader，那么就需要调用 Webpack 所提供的 API。 一般来说，构建系统都会提供一些特有的 API 供开发者使用。Webpack 也如此，提供了一套 Loader API，可以通过在 node module 中使用 this 来调用，如 this.callback(err, value…)，这个 API 支持返回多个内容的结果给下一个 Loader 。

　　// return multiple result
　　module.exports = function(source, other) {
　　// do whatever you want
　　// ...
　　this.callback(null, source, other);
　　};
　　

　　以上的内容，稍总结下
　　从右到左，链式执行
　　上一个 Loader 的处理结果给下一个接着处理
　　node module 写法
　　module 依赖
　　return && this.callback()
　　而实际上，掌握上面所介绍的内容及思想，就可以开始写一个简单的 Loader 了，不是吗？ 由上所说的，在你的 Loader 中，你可以拿到需要处理的文件内容，并且知道了处理后的结果应该怎么去返回，在中间部分，你可以以正常使用 node 的姿态对内容进行怎样的处理，Do Whatever You Want，Loader 没有其他特殊要求。