使用webpack loader加载器

永不落伍

了解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格式