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定义。