了解webpack请移步webpack初识!
什么是loader
loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)，例如：你可以使用loader来告诉webpack去加载一个coffeescript或者jsx
loader 特性
- loaders可以串联，他们应用于管道资源，最后的loader将返回javascript，其它的可返回任意格式（传递给下一个loader）
- loaders 可以同步也可以异步
- loaders在nodejs下运行并且可以做一切可能的事
- loader接受参数，可用于配置里
- loaders可以绑定到extension/RegExps 配置
- loaders 可以通过npm发布和安装
- 正常的模块儿可以到处一个loader除了
- loaders 可以访问配置
- 插件可以给loaders更多的特性
- loaders可以释放任意额外的文件
如果你对loader的例子感兴趣可以去看下现有的loader列表
解析loaders
loaders的解析类似模块儿，一个loader模块会导出一个方法并且可被nodejs写为可兼容的javascript，通常情况下通过npm来管理loaders，但你也可以把loader放在自己的应用里
引用loaders
按照惯例，虽然不是必须的，但loaders通常被命名为XXX-loader, XXX是上下文名称，比如json-loader.
你可能引用loaders通过完整的（真实的）名字例如（json-loader)或者通过他的速记名（.json)
loader的名称约定和优先级搜索是通过webpack内置api esolveLoader.moduleTemplates所定义
loader的名称约定很有用处，特别是当你通过require()声明来引用的时候，下面会讲到用法
安装loaders
如果这个loader可以在npm上安装，你可以安装这个loader通过
$ npm install xxx-loader --save或者
$ npm install xxx-loader --save-dev用法
有很多种方法在你的app中使用loaders
- 明确的require声明(在想要试用的js文件夹里直接加载)
- 通过配置文件配置
- 通过CLI配置
require
提示：如果可以的话尽量不要使用require ，如果你想让你的脚本可运行在服务端和客户端（nodejs和浏览器）使用约定配置文件来配置
通过require声明（define，require.ensure,等等）来加载指定的loaders ，使用!来分割资源loaders，每一部分会被解析到当前的文件
可以在配置文件里通过加!前缀这种规则重写任意的loader
require("./loader!./dir/file.txt");
require("jade!./template.jade");
require("!style!css!less!bootstrap/less/bootstrap.less");
配置文件
你可以通过正则在配置文件里绑定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(命令行界面)
CLI
可以通过命令行来绑定加载器
$ webpack --module-bind jade --module-bind 'css=style!css'
// 使用loader'jade'来加载'.jade'的文件 ,使用loaders 'style'和'css'加载'.css'文件
查询参数
loader可以使用查询参数通过字符串（像web上的一样）查询字符串被插在?后面例如url-loader?mimetype=image/png.
提示：查询参数的格式由loader决定，查看loader格式文档大多数的loaders接受如下格式的参数形式（?key=value&key2=value2）和JSON 对象格式 (?{"key":"value","key2":"value2"}).
require里
require("url-loader?mimetype=image/png!./file.png");配置文件里
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }或者
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}CLI方式
webpack --module-bind "png=url-loader?mimetype=image/png"个人理解
以上文段皆翻译自webpack官网若有错误请指正，接下来说下个人对loader的理解，我觉得loader是一个很于意思的功能，webpack其实运行在node下的一个编译站，她可以将各种个样的文件打包起来，包括图片呀，css呀，视频呀，但无论怎么打包最后导出的都是javascrit，但是我们最终被客户端拉出的页面需要css的渲染 需要图片的路径，而loader她可以把各种各样的资源文件进行转变编译，最后用正确的格式加载到浏览器中，比如css被转换为style插入到页面，图片被转换为base64格式
