webpack loader

是什么

loader 本质是一个导出函数的模块。

有什么作用

loader 的作用就是对源码进行转换（在 import 或 load 时进行预处理），可以通过 loader 将 webpack 不认识的资源转换为 webpack 可以识别的。

使用方式

配置文件（推荐）

在 webpack 配置文件（默认为 webpack.config.js）中进行配置。

module.rules 字段用来配置 loader。配置多个 loader 时，执行顺序为从后向前（从右到左）。

module.exports = {
  module: {
    rules: [// 配置 loader
      {
        test: /\.css$/,
        use: [//执行顺序为： sass-loader css-loader style-loader
          // style-loader
          { loader: 'style-loader' },
          // css-loader
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // sass-loader
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};

Inline

• 可以通过 import 语句来导入 loader，多个 loader 间用! 分隔。loader 会相对于当前路径进行解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

• 通过为内联 import 语句添加前缀，可以覆盖 配置 中的所有 loader, preLoader 和 postLoader：

  //使用 ! 前缀，将禁用所有已配置的 normal loader(普通 loader)
  import Styles from '!style-loader!css-loader?modules!./styles.css';
  
  //使用 -! 前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders
  import Styles from '-!style-loader!css-loader?modules!./styles.css';
  
  //使用 !! 前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）
  import Styles from '!!style-loader!css-loader?modules!./styles.css';

cli

通过 CLI 使用 loader：

#对 .jade 文件使用 pug-loader，以及对 .css 文件使用 style-loader 和 css-loader
webpack --module-bind pug-loader --module-bind 'css=style-loader!css-loader'

特点

• loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何操作。
• loader 可以通过 options 对象配置（仍然支持使用 query 参数来设置选项，但是这种方式已被废弃）。
• 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。

解析

loader 遵循标准 模块解析 规则。