你的位置:首页 > Java教程

[Java教程]webpack构建与loaders


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:转载请注明 博客园:杨君华,文章有不足之处,望指正,多包涵。