什么是loaders？

什么是Loaders？

loaders是应用在你app中的某些源文件的转换器，它们是一些函数（运行在node.js上），可以将资源文件的源文件依据参数转化为

新的源文件。

例如，你可以使用loaders告诉webpack去加载（转换）CoffeeScript或者JSX。

Loader特性

• loaders可以是链式的。它们使用管道的方式应用于资源。期待最后一个loader返回JavaScript；其他的loader可以返回任意的资源

格式，然后传递给下一个loader。

• 支持同步和异步。

• 运行在node.js中，并且可以做所有可能做的事。

• 接受查询参数，所以我们可以向loader传递配置信息。

• 在配置文件中loaders可以被绑定到扩展名（原文是extensions，感觉不太通顺）或者正则表达式。

• 可以通过npm进行发布和安装。

• 标准模块可以通过package.jsonloader向标准main输出loader。




•可以访问（access）配置。





•插件可以赋予loaders更多的特性。





•可以发出更多额外的任意文件。





•等等





如果你对更多的loader例子感兴趣，请走传送门http://webpack.github.io/docs/list-of-loaders.html

解析Loaders

loaders可以向模块一样被解析。一个loader模块被期望输出一个函数，并且使用兼容性js的node.js书写。通常情况下，你可以使用

npm管理loaders，但你也可以像你的app文件一样管理它们。

引用loaders

按照惯例，loaders虽然不被要求，但是通常会被命名为xxx-loader，而xxx会被当做上下文名称。例如，json-loader。

你可以使用它的全名（实际名字，例如json-loader），或者它的简写名字（例如json）来引用一个loader。

loader的命名协定和搜索顺序的优先级由webpack的配置API中的 resolveLoader.moduleTemplate 定义。

loader命名协定可能是有用的，尤其是通过require()语句引用它们的时候；看下面的用法。

安装loaders

如果某个loader在npm上是可以使用的，那么你可以通过这样去安装它：

npm install xxx-loader --save

或者

npm install xxx-loader --save-dev

用法

有多种方式在你的app中使用loaders：

•在require语句中显示使用

•通过配置文件配置

•通过CLI配置

loaders in require

注：如果可能的话，如果你的脚本处于不可确定的环境下（node.js和浏览器）， 请避免这么使用。使用配置协定来指定

loaders（请看下章分解）。

可以在require（或者define，require.ensure等等）语句中指定loaders。使用'!'隔开不同的loaders。每个部分根据当前目录来

解析。

可以在配置文件中通过在整个规则前加上'!'来重写任何loaders。

require("./loader!./dir/file.txt");
//=>在当前文件夹中使用“loader.js”文件对dir文件夹中的“file.txt”文件进行转换
require("jade!./template.jade");
//=>使用"jade-loader" （通过npm安装到了"node_modules"文件夹中）对文件"template.jade"
//  进行转换。如果配置文件中有一些转化也绑定到了这个文件，那么他们也将被应用。
require("!style!css!less!bootstrap/less/bootstrap.less");
//=>在"bootstrap"模块（通过GitHub安装到了"node_modules"文件夹中）中的less"文件
//  夹中的"bootstrap.less"文件将被"less-loader"转换。这个结果将会被"css-loader"
//  转换，然后再被"style-loader"转换。如果配置文件中有一些转化也绑定到了这个文件，
//  那么他们也将被应用。

注：当使用链式loaders，他们会从右到左被应用。

配置

你可以通过配置文件来绑定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"] },
        ]
    }
}

CLI（命令行）

你可以通过CLI绑定loaders到扩展名：

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

这里使用loader"jade"转换".jade"文件，使用"style"和"css"转换".css"文件。

查询参数

可以通过将查询字符串（就像在web中一样）传递查询参数到loader中。查询字符串会使用'?'添加到loader上。例如url-loader?




mimetype=image/png。

注：查询字符串的格式由loader决定，可以到loader文档查看具体情况。大部分loaders接受标准查询格式(?




key=value&key2=value2)以及JSON对象(?{"key":"value","key2":"value2"})。

1、require

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

2、配置文件

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

或者

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

3、CLI

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