Webpack 加载器 API

Webpack 加载器（Loader）是用于处理不同类型文件的转换器，它将文件作为输入，经过一系列处理后输出新的文件。Webpack 通过加载器实现了模块化的开发，使得开发者可以在项目中引入各种类型的文件，如 CSS、图片、字体等。

基本概念

Webpack 加载器是一个函数或者一个包含 loader 属性的对象，它会在模块加载时被调用，将模块源码作为参数传入，最终返回转换后的源码。加载器可以通过 module.rules 配置项来指定，每个加载器可以通过 test 属性匹配文件路径，通过 use 属性指定使用哪些加载器进行转换。

创建自定义加载器

要创建自定义加载器，只需要导出一个函数，该函数接受一个参数，即模块源码，然后对其进行处理后返回。下面是一个简单的加载器示例：

-------------- - ---------------- -
  -- -------
  ------ --------------- - ---------------------------
--

使用加载器

要在 Webpack 中使用加载器，需要在配置文件中的 module.rules 中指定加载器的匹配规则和处理方式。例如，使用 babel-loader 来处理 ES6 语法：

-------------- - -
  ------- -
    ------ -
      -
        ----- --------
        -------- ---------------
        ---- -
          ------- ---------------
          -------- -
            -------- ---------------------
          -
        -
      -
    -
  -
--

在上面的配置中，我们指定了一个匹配规则，即匹配所有以 .js 结尾的文件，并使用 babel-loader 来处理这些文件。加载器可以串联使用，多个加载器会按照从右到左的顺序依次执行。

加载器链

Webpack 允许在配置文件中定义加载器链，加载器链是一组加载器的组合，每个加载器依次处理模块源码，直到最后一个加载器输出最终的源码。加载器链可以通过 use 属性来指定，如下所示：

-------------- - -
  ------- -
    ------ -
      -
        ----- ----------
        ---- ---------------- ------------- --------------
      -
    -
  -
--

在上面的配置中，我们定义了一个加载器链，依次使用 style-loader、css-loader 和 sass-loader 来处理 .scss 文件。

总结

Webpack 加载器是处理不同类型文件的转换器，通过加载器可以实现对模块源码的处理和转换。加载器可以通过配置文件中的 module.rules 来指定，可以串联使用，也可以定义加载器链来处理特定类型的文件。加载器的灵活性和可扩展性使得开发者可以轻松地处理各种类型的文件，实现模块化的开发。