WebPack系列教程(六):使用LOADERS

什么是loaders?

loaders被应用于应用程序的资源文件中,通常用来做转换。它们都是函数(运行在nodejs中),将资源文件的源码作为入参,处理完后,返回新的源码文件。

例如,你可以使用loaders告诉webpack加载coffeescript和jsx。

Loader 特性
  • Loaders 能被链式调用。它们以管道的形式应用于资源中。最后一个Loader需要返回javascript,而其他所有的loader(传递给下一个loader)可以返回任意格式。
  • Loaders可以是同步的,也可以是异步的。
  • Loaders运行于nodejs环境,能做任何nodejs可以完成的功能。
  • Loaders接受查询参数,这样loader可以获取外部传递的配置项。
  • Loaders可以在配置中绑定扩展/正则表达式。
  • Loaders能通过npm进行发布和安装。
  • 普通模块除了通过package.json loader的普通main,还能向外开放loader接口。
  • Loaders 能访问配置。
  • 插件系统能给loader更多的特性。
  • Loaders 可以向外分发更多的任意格式的文件。
  • 等等

如果你对一些loaders的例子感兴趣,可以访问list of loaders

解析loaders

loaders被解析为类似于模块的形式。一个loader模块被期望返回一个函数,并按照nodejs环境中的javascript规范编码。通常使用npm来管理这些loaders,但是你也可以在你的项目中通过文件的形式来使用这些loaders。

引用 loaders

按照惯例,虽然不是必须的,loaders 通常被命名为XXX-loader,其中XXX是上下文名称,例如,JSON-loader。

你能通过loader的全名(实际的名称,如:json-loader),或者简写的形式(如:json)来引用它们。

loader的命名惯例和优先级搜索顺序都在webpack的配置API,resolveLoader.moduleTemplates中进行定义的。

loader的命名惯例还是比较有用的,尤其在require()表达式中引用它们,可以见下面的使用。

安装 loaders

如果loader在npm中存在,那么我们可以通过如下命令来安装loader:

$ npm install xxx-loader --save

或者

$ npm install xxx-loader --save-dev

使用

有很多种方式在你的项目中来使用loaders:

  • 在require语句中明确申明;
  • 通过配置文件配置;
  • 通过CLI来配置;
loaders in require

注意:如果非必须的话,或者你打算你的脚本运行于不可知的环境(nodejs和浏览器),否则尽量不要使用这种方式,而是使用配置约定来使用loaders(见下节)。

在require语句(define,require.ensure, etc…)指定加载哪些loaders是可能的。只是在资源中使用!来分割loaders。每个部分相对于当前目录进行解析。

在整个规则前加上!来覆盖配置中的loaders是完全可能的。

require("./loader!./dir/file.txt");
// => 在当前目录使用文件 "loader.js"来转换"dir"目录中的"file.txt"。

require("jade!./template.jade");
// => 使用"jade-loader" (that is installed from npm to "node_modules")
// => 转换文件 "template.jade"
// => 如果配置文件中对该文件有转换,它们仍然会被应用。

require("!style!css!less!bootstrap/less/bootstrap.less");
// => the file "bootstrap.less" in the folder "less" in the "bootstrap"
//    module (that is installed from github to "node_modules") is
//    transformed by the "less-loader". The result is transformed by the
//    "css-loader" and then by the "style-loader".
//    If configuration has some transforms bound to the file, they will not be applied.
配置

你可以通过配置中的正则表达式来绑定loader:

{
    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"] },
        ]
    }
}
CLI

你可以通过CLI绑定loaders来进行扩展。

$ webpack --module-bind jade --module-bind 'css=style!css'
查询参数

Loader能通过查询字符串(类似于web)来传递参数,查询字符串被添加在loader后面,中间用?连接。如:url-loader?mimetype=image/png

注意:查询字符串的格式是依赖于loader的。大部分的loader接收普通的查询字符串(?key=value&key2=value2)和JSON对象(?{“key”:”value”,”key2”:”value2”}`)。

in require
require("url-loader?mimetype=image/png!./file.png");
配置
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
CLI
webpack --module-bind "png=url-loader?mimetype=image/png"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值