webpack-loader（加载器）

加载器是用于资源文件的转换。 加载器就是以资源文件做为入参并返回新的资源的函数（在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定义。