using loaders.cn

What are loaders?

loader 是什么东西？

Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.

loader 是对你的应用中资源文件进行的转换。它们是将资源文件作为参数返回新的资源的函数（运行于node.js）

For example, you can use loaders to tell webpack to load CoffeeScript or JSX.

例如，你可以使用 loader 让webpack去加载CoffeeScript或者JSX

Loader features

loader 特性

• Loaders can be chained. They are applied in a pipeline to the resource. The final loader is expected to return JavaScript; each other loader can return source in arbitrary format, which is passed to the next loader.

• Loaders can be synchronous or asynchronous.

• Loaders run in Node.js and can do everything that's possible there.

• Loaders accept query parameters. This can be used to pass configuration to the loader.

• Loaders can be bound to extension / RegExps in the configuration.

• Loaders can be published / installed through npm.

• Normal modules can export a loader in addition to the normal main via package.json loader.

• Loaders can access the configuration.

• Plugins can give loaders more features.

• Loaders can emit additional arbitrary files.

• etc.

• loader 可以串联使用。它们以管道的形式应用到资源。最后一个 loader 应返回 Javascript 代码；其他的可以返回任意格式，并会被传给下一个 loader。

• loader 可以同步和异步运行。

• loader 运行在 Node.js 上，可以做任何其上可能做到的事情。

• loader 接受查询参数，可以用来给 loader 传递配置。

• loader 可以绑定到配置中的文件扩展名或正则匹配。

• loader 可以通过npm发布或安装。

• 除了正常的main声明，普通的模块可以通过package.json的loader导出 loader 。

• loader 可以访问配置信息。

• 插件可以给予装载机更多的功能。

• loader 可以提交额外的任意文件。

• etc.

If you are interested in some loader examples head off to the list of loaders.

如果你对某些loader的示例有兴趣，看看list of loaders

Resolving loaders

解析 loader

Loaders are resolved similar to modules. A loader module is expected to export a function and to be written in node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.

loader 的解析跟模块的相似resolved similar to modules。一个 loader 模块期望输出一个函数，以node.js兼容的javascript编写。在通常情况下，你使用npm管理 loader ，但你也可以在应用在自行开发 loader 。

Referencing loaders

引用 loader

By convention, though not required, loaders are usually named as XXX-loader, where XXX is the context name. For example, json-loader.

按照惯例，虽不是必需， loader 通常命名为XXX-loader，XXX视情况改变。譬如，json-loader.

You may reference loaders by its full (actual) name (e.g. json-loader), or by its shorthand name (e.g. json).

你可以通过 loader 的全称（如json-loader）或者简称（如json）来引用到它们。

The loader name convention and precedence search order is defined by resolveLoader.moduleTemplates within the webpack configuration API.

loader 的命名约定以及搜索顺序的优先级通过webpack配置API中的resolveLoader.moduleTemplates来定义

Loader name conventions may be useful, especially when referencing them within require() statements; see usage below.

loader 命名约定可以很有用，特别是在require()句中引用到它们的时候。看下面的用例

Installing loaders

安装 loader

If the loader is available on npm you can install the loader via: 如果 loader 在npm上，你可以通过这个来安装它：

$ npm install xxx-loader --save

or

或者

$ npm install xxx-loader --save-dev

Usage

使用

There are multiple ways to use loaders in your app: 在应用中有很多方式使用 loader ：

• explicit in the require statement

• configured via configuration

• configured via CLI

• 在require()句子里明确声明

• 通过配置文件来配置

• 通过命令行接口CLI来配置

loaders in require

require中的 loader

Note: Avoid using this, if at all possible, if you intend your scripts to be environment agnostic (node.js and browser). Use the configuration convention for specifying loaders (see next section).

注意： 如果可以的话，如果你想你的脚本环境无关的话（node.js和browser)，避免使用这种方式。使用配置约定来指定 loader （见下一节）。

It's possible to specify the loaders in the require statement (or define, require.ensure, etc.). Just separate loaders from resource with !. Each part is resolved relative to the current directory.

可以在require句（或者define, require.ensure,等等）中指定 loader 。只须用!来将 loader 和资源路径区分开来。每部分都以相对于当前目录来解析。

It's possible to overwrite any loaders in the configuration by prefixing the entire rule with !.

在配置中对整条规则添加!前缀，可以覆盖掉任意 loader 。

require("./loader!./dir/file.txt");
// => uses the file "loader.js" in the current directory to transform
//    "file.txt" in the folder "dir".

require("jade!./template.jade");
// => uses the "jade-loader" (that is installed from npm to "node_modules")
//    to transform the file "template.jade"
//    If configuration has some transforms bound to the file, they will still be applied.

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.

Configuration

Configuration配置

You can bind loaders to a RegExp via configuration:

你可以通过配置来绑定 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命令行接口

You can bind loaders to an extension via CLI:

你可以通过CLI将 loader 绑定到某个文件后缀

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

This uses the loader "jade" for ".jade" files and the loaders "style" and "css" for ".css" files.

这里使用了"jade" loader 来处理".jade"文件，"style"和"css" loader 来处理".css"文件

Query parameters

查询参数

Loader can be passed query parameters via a query string (just like in the web). The query string is appended to the loader with ?. i.e. url-loader?mimetype=image/png.

loader 可以通过查询字符串来传递查询参数（就像web上面的一样）。使用?标记，查询字符串可追加到 loader 声明。如，url-loader?mimetype=image/png

Note: The format of the query string is up to the loader. See format in the loader documentation. Most loaders accept parameters in the normal query format (?key=value&key2=value2) and as JSON object (?{"key":"value","key2":"value2"}).

注意：查询字符串的格式是取决于 loader 的。参见对应 loader 文档中的格式。大部分 loader 接受正常查询格式的参数(?key=value&key2=value2)和JSON对象格式的(?{"key":"value","key2":"value2"})

in require

在 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"