[译]开启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"