加载器是用于资源文件的转换。 加载器就是以资源文件作为入参并返回新的资源的函数(在Node.js中运行)。
例子
例如,您可以使用加载器告诉webpack加载CSS文件或TypeScript文件,并将之转换为JavaScript。 首先,安装相应的加载器:
npm install --save-dev css-loader
npm install --save-dev ts-loader
其次,在你的webpack.config.js中配置匹配每个.css文件,并运用css-loader生成js资源,同理对.ts文件, 运用ts-loader`:
webpack.config.js
module.exports = {
module: {
rules: [
{test: /\.css$/, use: ['css-loader'](/loaders/css-loader)},
{test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)}
]
}
};
注意,根据配置选项,应以以下规范使用相同的装载器:
{test: /.css$/, loader: 'css-loader'}
// or equivalently
{test: /.css$/, use: 'css-loader'}
// or equivalently
{test: /.css$/, use: {
loader: 'css-loader',
options: {}
}}
配置
有三种方式在你的应用中使用加载器:
通过配置
在require语句中显式引入
通过 CLI
通过 webpack.config.js配置
module.rules 允许您在webpack配置中指定多个加载器。
这是一个简便的方式来配置加载器,并有助于你总览应用中每个加载器。
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
通过 require配置
通常指在 require 语句(或者 define, require.ensure, 等)中配置加载器。使用!将资源中的加载器分开, 每个部分相对于当前目录解析。
require('style-loader!css-loader?modules!./styles.css');
可以通过用整个规则前缀!覆盖配置中的任何加载器 .
可以使用查询参数传递选项, 就好像如web(?key=value&foo=bar)中一样。也可以使用JSON对象(?{"key":"value","foo":"bar"}).
使用 module.rules 只要有可能,因为这将减少你的源代码中的样板,并允许你调试,并且定位加载器出现问题更快。
通过CLI配置
或者,你也可以通过CLI安装加载器 :
webpack --module-bind jade --module-bind 'css=style!css'
上述脚本为.jade 文件配置了 jade-loader加载器, 以及为css文件配置了 style-loader 和 css-loader 加载器.
加载器特性
加载器是可以被串联的。就好像是个资源的管道(正如gulp的管道一样)。webpack会按时间顺序编译加载器链。 加载器链中的第一个加载器会将值作为给下一个加载器的输入。 在结束时,webpack最后返回JavaScript资源。
加载器可以是同步或异步的。
加载器在Node.js中运行,并且可以执行所有可能的操作。
加载器接受查询参数。 这可以用于将配置传递给加载器。
加载器也可以配置一个options对象。
Normal modules can export a loader in addition to the normal main via package.json with the loader field.
插件可以给加载器提供更多特性.
加载器可以产生任何其他的文件.
装载器通过预处理JavaScript环境,提供更多的功能。
functions (loaders).用户现在有更多的灵活性来实现细粒度的逻辑,如压缩,包装,语言翻译以及更多...。
获得加载器
加载器符合标准模块协议。大多数情况下,你会从模块路径 下获得你的加载器 (比如npm install, node_modules).
如何编写加载器? 一个加载器模块需要用Node.js兼容的JavaScript编写一个可以export的方法。 在通常情况下,你用npm管理加载器,但你也可以在你的应用程序中直接使用js文件编写的加载器。
按照惯例, 加载器通常被命名为 XXX-loader, XXX 就是场下文的名字,比如说 json-loader.
加载器名称约定和优先搜索顺序由由webpack配置API中的resolveLoader.moduleTemplates定义。
下一篇:插件