关于webpack
作为近段时间风头正盛的打包工具，webpack基本占领了前端圈。相信你都不好意思说不知道webpack。
有兴趣的同学可以参考下我很早之前的webpack简介 .
确实webpack万事万物皆模块的思路真是极大的方便了我们的开发，将css，图片等文件都能打包的功能离不开形形色色的loader。
对于一个事情要知其然更要知其所以然，抱着这个心态我们一起来看下loader的相关知识及如何开发。
学习方法
对于一个新事物最好的学习方法，我认为是其官方文档。对于loader，将其官方文档看一遍，就知道如何开发最简单的loader了。
只是其官方文档是英文的，我就顺手翻译了一下，一方面加深自己理解。另一方面为其他同学提供个参考。
我相信看完文档你就知道如何开发一个loader了。
什么是loader
loader是一个对面暴露一个方法的node包.当遇到某些资源需要被转换时调用该方法。
简单情况
只有一个loader来处理某个文件时，该loader被调用时只有一个参数，这个参数是该文件的内容转化之后的字符串。
loader在function执行时可以通过this context来访问laoder API 以便更高效的开发。
一个仅仅需要一个值的同步loader可以简单的return 自己。其他情况下，loader可以通过this.callback(err, values...)返回一系列的值。error同样传递给this.callback或者在loader中抛出。
loader期望返回1-2个值，第一个是处理之后作为string或者buffer返回的js代码。第二个是SourceMap或者js 对象
复杂情况:
当多个loader被链式调用时，只有最后一个loader获得资源文件。
同时只有第一个loader被期望返回1-2个值(即上面提到的JavaScript和SourceMap)。
其他loader接收值由上一个loader传递。
换句话说，链式loader执行顺序从右至左或者自下而上。
举个栗子：下面这段代码的执行顺序就是自下而上 foo-loader==>bar-loader
module: {
loaders: [
{
test: /\.js/,
loaders: [
'bar-loader',
'foo-loader'
]
}
]
}
注意：当前weboack只会在nodemodules文件夹下面搜索你指定的loader
如果你的文件夹不在该目录下需要在config下面增加一项配置:
即默认访问node_modules，你的文件夹不在的话就需要手动在配置文件里加上了。
resolveLoader: {
modules: ['node_modules', path.resolve(__dirname, 'loaders')]
}
温馨提示
ps：经过自身实践发现这样写是错的，不需要通过path去解析，直接将文件目录写入即可。
一般来说loader都会发布到npm上进行管理，这种状况不用担心，但是开发阶段如果要自行测试，就面对这种情况了。
例如，我手写的myloader在loaders下面，例子如下。
resolveLoader:{
modules: ['node_modules','loader']
}
Examples
就这么简单就是个普通的loader
module.exports = function(source,map){
this.cacheable && this.cacheable()
this.value = source
return '/*copy@ xiaoxiangdaiyu*/'+JSON.stringify(source)
}
开发指南
loader需要遵循以下事项。
以下事项按优先级排列，第一条具有最高优先级。
一、单一任务
loaders可以被链式调用，为每一步创建一个loader而非一个loader做所有事情
也就是说，在非必要的状况下没有必要将他们转换为js。
例如：通过查询字符串将一个字符串模板转化为html。
如果你写了个loader做了所有事情那么你违背了loader的第一条要求。
你应该为每一个task创建一个loader并且通过管道来使用它们
- jade-loader: 转换模板为一个module
- apply-loader: 创建一个module并通过查询参数来返回结果
- html-loade: 创建一个处理html并返回一个string的模块
二、创建moulde话的模块，即正常的模块
loader产出的module应该和遵循和普通的module一样的设计原则。
举个例子，下面这样设计是不好的，没有模块化，依赖全局状态
require("any-template-language-loader!./xyz.atl");
var html = anyTemplateLanguage.render("xyz");
三、尽量表明该loader是否可以缓存
大部分loaders是cacheable，所以应该标明是否cacheable。
只需要在loader里面调用即可
// Cacheable identity loader
module.exports = function(source) {
this.cacheable();
return source;
};
四、不要在运行和模块之间保存状态
- 一个loader相对于其他编译后的模块应该是独立的。 除非其可以自己处理这些状态
- 一个loader相对于同一模块之前的编译过程应该是独立的。
五、标明依赖
如果该loader引用了其他资源（例如文件系统）， 必须声明它们。这些信息用来是缓存的loader失效并且重新编译它们
var path = require("path");
module.exports = function(source) {
this.cacheable();
var callback = this.async();
var headerPath = path.resolve("header.js");
this.addDependency(headerPath);
fs.readFile(headerPath, "utf-8", function(err, header) {
if(err) return callback(err);
callback(null, header + "\n" + source);
});
};
六、解析依赖
很多语言都提供了一些规范来声明依赖，例如css中的 @import 和 url(...)。这些依赖应该被模块系统所解析。
下面是两种解决方式：
- 1、将它们转化成require
- 2、 用this.resolve方法来解析路径
下面是两个示例
- 1、css-loader: 将依赖转化成require，即用require来替换@import和 url(...)，解析对其他样式文件的依赖
- 2、less-loader: 不能像css-loader那样做，因为所有的less文件需要一起编译来解析变量和mixins。因此其通过一个公共的路径逻辑来扩展less编译过程。这个公共的逻辑使用this.resolve来解析带有module系统配置项的文件。例如aliasing, custom module directories等。
如果语言仅仅接受相对urls（如css中url(file) 总是代表./file），使用~来说明成模块依赖.
url(file) -> require("./file")
url(~module) -> require("module")
七、抽离公共代码
extract common code 我感觉还是翻译成上面的标题比较好。其实所有语言都遵循该思想，即封装
不要写出来很多每个模块都在使用的代码，在loader中创建一个runtime文件，将公共代码放在其中
八、避免写入绝对路径
不要把绝对路径写入到模块代码中。它们将会破坏hash的过程当项目的根目录发生改变的时候。应该使用loader-utils的 stringifyRequest方法来绝对路径转化为相对路径。
例子：
var loaderUtils = require("loader-utils");
return "var runtime = require(" +
loaderUtils.stringifyRequest(this, "!" + require.resolve("module/runtime")) +
");";
九、使用peerDependencies来指明依赖的库
使用peerDependency允许应用开发者去在package.json里说明依赖的具体版本。这些依赖应该是相对开放的允许工具库升级而不需要重新发布loader版本。简而言之，对于peerDependency依赖的库应该是松耦合的，当工具库版本变化的时候不需要重新变更loader版本。
十、可编程对象作为查询项
有些情况下，loader需要某些可编程的对象但是不能作为序列化的query参数被方法解析。例如less-loader通过具体的less-plugin提供了这种可能。这种情况下，loader应该允许扩展webpack的options对象去获得具体的option。为了避免名字冲突，基于loader的命名空间来命名是很必要的。
// webpack.config.js
module.exports = {
...
lessLoader: {
lessPlugins: [
new LessPluginCleanCSS({advanced: true})
]
}
};
结束语
至此，如何开发一个webpack loader 我相信大家已经知道了，如果还不太清楚的话，可以移步w-loader查看。
另外，对于我这种英语渣渣来说，翻译起来确实难度蛮大的。此处抛砖引玉，希望大家共同探讨学习。