[译]开启webpack之旅( 三 )：使用Loaders

原文地址

Loaders为何物？

Loaders是应用于你app资源文件上的转换器。它们是执行在node端的函数，它们将源文件作为参数并将转换结果作为新的资源返回。
例如，你可以使用loaders让web pack加载CoffeeScript或是JSX。

Loader特性

• Loaders可以被链式调用。它们像管道（pipeline）一样处理资源。只有最后一个loader返回JavaScript格式的代码，而其他的loader可以返回任意格式并将其传给下一个loader

• Loaders既能同步执行也能异步执行

• Loaders运行在 node.js 环境中，所以可以做任何可能的事情

• Loaders接受query参数，这意味着我们可以把配置项传给loader

• Loaders在配置文件中可以被绑定到不同的文件，通过扩展名或正则表达式

• Loaders可通过nam发布或安装

• 除了可以在package.son文件中配置loader，通常模块也作为可以loader。

• Loader 可以访问配置

• 插件赋予loaders更多特性

• Loaders可用来分发文件（详见）

• 其他特性
  如果对某些loader感兴趣，请翻阅loaders列表

Loaders的解析

Loaders的解析与模块的解析一致，每个loader都是运行在JavaScript中的脚本并通常返回一个函数。我们通常用nam管理loaders模块，但在你的app也可以使用自己写的文件充当模块。

模块的引用

并非硬性要求，只是我们习惯上使用XXX-loader作为loaders的名称。其中XXX是上下文名称，例如json-loader。

你可以通过全名引用一个loader(如json-loader), 也可以使用简写(如json)。
loader名称的习惯用法与优先级规则由webpack的配置API： resolveLoader.moduleTemplates 定义。

Loader名称的习惯用法是很有用的，特别是在使用require()语句引用Loader时。参见下述用法。

安装loaders

发布在npm上的loaders你可以使用：

$ npm install xxx-loader --save

或

$ npm install xxx-loader --save-dev

安装。

用法

在app中使用loaders的方法也是多种多样的：

• 直接使用require语句引用

• 在配置文件中配置configuration

• 在CLI（命令行）中配置

通过require引用loaders

注意：在任何情况下都因避免使用此方法，如果你想要让你的脚本不依赖运行环境（node或浏览器）。使用配置去声明loaders（参见下述配置）。

请尽量使用require语法声明(或define,require.ensure).使用!作为loaders与资源之间的分隔。被引用部分的相对路径是当前目录。

模块可以串联，通过使用!符号组织。

require("./loader!./dir/file.txt");
// => 使用在当前目录下的"loader.js"文件去处理在文件夹"dir"中"file.txt"文件

require("jade!./template.jade");
// => 使用"jade-loader" (通过nam安装在"node_modules")去处理文件"template.jade"，如果配置中对文件还有别的处理也会被应用。

require("!style!css!less!bootstrap/less/bootstrap.less");
// => "bootstrap"目录下的"less"目录下的"bootstrap.less"文件将会被"less-loader"处理后转给"css-loader"处理之后再转给"style-loader"处理，如果配置中对文件还有别的处理将不会被应用。

配置文件

在配置文件中通过正则绑定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

通过命令行扩展绑定loaders：

$ webpack --module-bind jade --module-bind 'css=style!css'

这里使用“jade” loader 来处理“.jade”文件，使用“style” loader与“css” loader 处理“.css”文件。

查询参数

Loader可以通过查询字符串来传递查询参数(像url中一样)。通过使用?将查询字符串附加在loader后，如url-loader?mimetype=image/png。

注意：查询字符串的格式取决于具体loader。详见具体loader文档.大多数loader接受参数格式(?key=value&key2=value2)也接受JSON对象(?{"key":"value","key2":"value2"})。

在require中使用的例子

require("url-loader?mimetype=image/png!./file.png");

在Configuration中使用的例子

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
or

{
    test: /\.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
}

CLI

webpack --module-bind "png=url-loader?mimetype=image/png"