loaders 定义
先了解一下webpack,webpack是一个用于针对js文件的构建工具,在被构建的js文件中,我们可以使用require语句和webpack loader,如下:
var css = require("css!./file.css"); // => returns css code from file.css, resolves imports and url(...)
css代码中的 @import与url()类似js的require()请求资源文件,css-loader 将会对 file.css文件中的 @import 和 url(...) 请求的资源进行解析处理,并转交
给适合处理请求资源文件的file-loader 或 url-loader。详情请看官网:https://www.npmjs.com/package/css-loader
基于上面示例,我对loader的定义是 转译器
loaders 特征
1、loaders 支持链式,它们被应用在资源的的管道中,最后一个loader预期返回javascript;每个laoder会返回任意格式的资源,并交给下一个loader进行处理.
2、loaders 支持同步和异步
3、loaders 运行在node.js环境中,可以做任何可能的事情(使用node.js api)
4、loaders 接受查询参数,可以通过配置loader来使用
5、loaders 可以在配置中通过正则匹配的文件扩展名来绑定
6、loaders 可以通过npm发布,安装
7、除了在package.json文件配置 main入口(指定js文件)之外,一般的js模块都可以作为导出的loader
8、loaders 可以访问配置
9、plugins 可以给予 loaders 更多的特征
10、loaders 可以处理额外的任意文件
...
如果你对一些loader示例感兴趣,请查看loaders列表:http://webpack.github.io/docs/list-of-loaders.html
loaders 解析
loaders解析类似于模块解析,一个loader模块 就是一个执行于node.js环境中的函数;一般情况下,你应该通过使用npm来
管理你的loaders,但是在你的项目中,也可以使用单个js模块来作为你的loader
1、引用loaders
loaders经常被命名为XXX-loader,XXX 代指文件mime类型的名称,如:json-loader
我们可以通过全名(如:json-loader),也可以通过简写名(如:json)来引用loaders
2、loaders 安装
如果loader存在于npm中,你可以像下面代码来安装loader:
npm install xxx-loader --save
or
npm install xxx-loader --save-dev
3、用法
使用require语句指定loaders
我们使用 感叹号! 来将资源文件与loaders分开,使用多个loaders,应在所有的转换规则(loader)之前加上感叹号!,如:
require(!style!css!less!./src/css/index.less);
注:使用多个loaders是由右向左处理的,文件依次按less-loader,css-loader,style-loader处理
通过在webpack.config.js文件中配置指定loaders
{ module: { loaders: [ { test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files // Alternative syntax: { test: /\.css$/, loaders: ["style", "css"] }, ] } }
通过在命令行中配置使用
通过命令行你可以将loaders绑定到扩展的文件进行转换,如:
webpack --module-bind jade --module-bind 'css=style!css'
这里使用jade-loader绑定到 扩展的jade文件进行转换,使用style-loader,css-loader绑定到css文件进行转换
4、查询字符串
Loader可以通过查询字符串(类似web页面url中的查询字符串)传递查询参数,使用问号?将 loader与查询字符串连接,loader后跟查询字符串,如:
url-loader?mimetype=image/png
or
url-loader?{"mimetype"="image/png"}
require写法
require("url-loader?mimetype=image/png!./file.png");
webpack.config.js配置
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
or
{ test: /\.png$/, loader: "url-loader", query: { mimetype: "image/png" } }
命令行绑定
webpack --module-bind "png=url-loader?mimetype=image/png"
ps:转载请注明 博客园:杨君华,文章有不足之处,望指正,多包涵。