原文地址
Loaders为何物？
Loaders是应用于你app资源文件上的转换器。它们是执行在node端的函数，它们将源文件作为参数并将转换结果作为新的资源返回。
例如，你可以使用loaders让web pack加载CoffeeScript或是JSX。
Loader特性
Loaders可以被链式调用。它们像管道（pipeline）一样处理资源。只有最后一个loader返回JavaScript格式的代码，而其他的loader可以返回任意格式并将其传给下一个loader
Loaders既能同步执行也能异步执行
Loaders运行在 node.js 环境中，所以可以做任何可能的事情
Loaders接受query参数，这意味着我们可以把配置项传给loader
Loaders在配置文件中可以被绑定到不同的文件，通过扩展名或正则表达式
Loaders可通过nam发布或安装
除了可以在
package.son文件中配置loader，通常模块也作为可以loader。Loader 可以访问配置
插件赋予loaders更多特性
Loaders可用来分发文件（详见）
其他特性
如果对某些loader感兴趣，请翻阅loaders列表
Loaders的解析
Loaders的解析与模块的解析一致，每个loader都是运行在JavaScript中的脚本并通常返回一个函数。我们通常用nam管理loaders模块，但在你的app也可以使用自己写的文件充当模块。
模块的引用
并非硬性要求，只是我们习惯上使用XXX-loader作为loaders的名称。其中XXX是上下文名称，例如json-loader。
你可以通过全名引用一个loader(如json-loader), 也可以使用简写(如json)。
loader名称的习惯用法与优先级规则由webpack的配置API： resolveLoader.moduleTemplates 定义。
Loader名称的习惯用法是很有用的，特别是在使用require()语句引用Loader时。参见下述用法。
安装loaders
发布在npm上的loaders你可以使用：
$ npm install xxx-loader --save或
$ npm install xxx-loader --save-dev安装。
用法
在app中使用loaders的方法也是多种多样的：
直接使用require语句引用
在配置文件中配置configuration
在CLI（命令行）中配置
通过require引用loaders
注意：在任何情况下都因避免使用此方法，如果你想要让你的脚本不依赖运行环境（node或浏览器）。使用配置去声明loaders（参见下述配置）。
请尽量使用require语法声明(或define,require.ensure).使用!作为loaders与资源之间的分隔。被引用部分的相对路径是当前目录。
模块可以串联，通过使用!符号组织。
require("./loader!./dir/file.txt");
// => 使用在当前目录下的"loader.js"文件去处理在文件夹"dir"中"file.txt"文件
require("jade!./template.jade");
// => 使用"jade-loader" (通过nam安装在"node_modules")去处理文件"template.jade"，如果配置中对文件还有别的处理也会被应用。
require("!style!css!less!bootstrap/less/bootstrap.less");
// => "bootstrap"目录下的"less"目录下的"bootstrap.less"文件将会被"less-loader"处理后转给"css-loader"处理之后再转给"style-loader"处理，如果配置中对文件还有别的处理将不会被应用。配置文件
在配置文件中通过正则绑定loaders:
{
module: {
loaders: [
{ test: /\.jade$/, loader: "jade" },
// => "jade" loader处理".jade"文件
{ test: /\.css$/, loader: "style!css" },
// => "style"与"css" loader 处理 ".css" 文件
// 另一种语法:
{ test: /\.css$/, loaders: ["style", "css"] },
]
}
}CLI
通过命令行扩展绑定loaders：
$ webpack --module-bind jade --module-bind 'css=style!css'
这里使用“jade” loader 来处理“.jade”文件，使用“style” loader与“css” loader 处理“.css”文件。
查询参数
Loader可以通过查询字符串来传递查询参数(像url中一样)。通过使用?将查询字符串附加在loader后，如url-loader?mimetype=image/png。
注意：查询字符串的格式取决于具体loader。详见具体loader文档.大多数loader接受参数格式(?key=value&key2=value2)也接受JSON对象(?{"key":"value","key2":"value2"})。
在require中使用的例子
require("url-loader?mimetype=image/png!./file.png");
在Configuration中使用的例子
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
or
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
CLI
webpack --module-bind "png=url-loader?mimetype=image/png"