loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。如：将ts转成js，将内联图转为data URL

示例

// 安装依赖
npm install --save-dev css-loader ts-loader

// webpack.config.js

module.exports = {
  // 程序中组件或者依赖都看成是module，所以loader是在module中的，是对module的处理。module的处理规则（rule）是css-loader，ts-loader
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

使用 loader

有两种使用 loader 的方式：

配置方式（推荐）：在 webpack.config.js 文件中指定 loader。
内联方式：在每个 import 语句中显式指定 loader。

注意在 webpack v4 版本可以通过 CLI 使用 loader，但是在 webpack v5 中被弃用

Configuration

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
    ],
  },
};

内联方式

可以在 import 语句或任何与 "import" 方法同等的引用方式中指定 loader。使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

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

　　内联 import 语句可以添加前缀 "!" 、"!!"、"-!"。尽量不用，这里不详述

尽量使用configuration。

loader 特性（下面的特性不明白具体应用是什么样的？？？后续章节后理解）

loader 支持链式调用
loader 可以是同步的，也可以是异步的
loader 运行在 Node.js 中，并且能够执行任何操作
loader 可以通过 options 对象配置
除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
插件(plugin)可以为 loader 带来更多特性
loader 能够产生额外的任意文件