using loaders - XUEJS/webpack-docs GitHub Wiki
什么是加载器?
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. 加载器就是在你的app中应用于资源文件的转换。他们是函数(在Node.js中运行),取一个资源文件作为参数的来源,并返回新的源。
例如,您可以使用加载器来告诉的 WebPack 加载的是 CoffeeScript 还是 JSX。
加载器功能
-
Loaders can be chained. They are applied in a pipeline to the resource. The final loader is expected to return JavaScript, the other can return arbitrary format (which is passed to the next loader) 加载器可以链接。它们被施加于一个管道到资源。最终的加载应返回的JavaScript,其他可以返回任意的格式(其被传递到下一个装载机)
-
加载器是可以同步和异步的。
-
Loaders run in node.js and can do everything that's possible there. //装载机在node.js中运行,并尽一切可能存在。
-
加载器接受查询参数。这可以用于将配置传递给加载程序。
-
加载器能够在配置中绑定 extension / RegExps
-
加载器可以通过
npm
发布 / 安装 -
Normal modules can export a loader in addition to the normal
main
viapackage.json
loader
. 普通模块除了出口装载机正常主通过的package.json 装载机。 -
加载器可以访问配置。
-
插件可以给加载器更多的功能。
-
Loaders can emit additional arbitrary files. // 加载器能够发出更多的任意文件。
If you are interested in some loader examples head of to the list of loaders. 如果你对加载器的例子比较感兴趣,可以查看加载器列表
解析加载器
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. 装载机是解决类似的模块。甲加载组件预计出口的函数和要写入的node.js兼容的JavaScript。在通常情况下,你管理装载机NPM,但你也可以有装载机在你的应用程序文件。
应用加载器
按照惯例,虽然不是必需的,装载机通常被命名为XXX-loader
,其中 XXX
为上下文名称。例如,json-loader
。
你可以参考加载器的完整的(实际)名称(如。json-loader
), 或其缩写名称(如。json
)。
加载器命名规则和优先搜索顺序是由 webpack 配置的 API 中 resolveLoader.moduleTemplates
定义的。
Loader name conventions may be useful, especially when referencing them within require()
statements; see usage below.
引用时,他们中的装载机命名约定可能是有用的,特别是需要()语句; 请参阅下面的使用。
加载程序名称约定可能有用,尤其是当引用它们内 'require () 语句;请参阅以下用法。
安装加载器
如果加载器在npm中可用,你可以通过下面的方式安装加载器:
$ npm install xxx-loader --save
或者
$ npm install xxx-loader --save-dev
用法
在你的app中有多种使用加载器的方法:
- 直接通过
require
声明 - 通过配置文件
- 通过CLI配置
require
loaders in 注意: 尽量避免这么使用,如果可能的话,如果你打算你的脚本与环境无关(node.js 和 browser)。使用 配置文件来约定所要指定的加载器(见下节)
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
, 等等)。通过 !
把加载器和资源分开。只能在当前目录下解决每个部分
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"
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".
构造
你可以通过配置一个正则表达式来绑定加载器:
{
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扩展来绑定加载器:
$ webpack --module-bind jade --module-bind 'css=style!css'
使用名为“jade”的加载器来加载“.jade”文件,也可以用名为“style”和“css”的加载器来加载“.css”文件
查询参数
加载程序可以通过查询字符串 (就像web) 传递查询参数。查询字符串通过?
追加到加载器后面。即:url-loader?mimetype=image/png
.
注意:查询字符串的格式是由加载器决定的。请参阅加载程序文档中的格式。大多数加载器接受正常的查询格式参数(?key=value&key2=value2
) 以及 JSON 对象 (?{"key":"value","key2":"value2"}
).
require
in require("url-loader?mimetype=image/png!./file.png");
Configuration
{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }
或者
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
CLI
webpack --module-bind "png=url-loader?mimetype=image/png"