webpack loader全解析，从入门到精通（10）

webpack 的核心功能是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。

1. 什么是 Loader

Loader 本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。Loader 在模块解析的过程中被调用，以得到最终的源码。

2. Loader 的工作流程

全流程

1. 初始化：webpack 读取配置文件，解析入口模块。
2. 编译：
   • 创建 chunk：根据入口模块创建 chunk。
   • 解析模块：解析每个模块的依赖关系。
   • 应用 loader：根据配置的 loader 对模块进行转换。
3. 输出：将编译后的资源输出到指定的文件中。
   

Chunk 中解析模块的流程

1. 读取模块内容：读取模块的源代码。
2. 解析依赖：解析模块中的依赖关系。
3. 生成 AST：生成抽象语法树（AST）。
4. 生成模块代码：根据 AST 生成最终的模块代码。

更详细的流程

1. 读取模块内容：读取模块的源代码。
2. 解析依赖：解析模块中的依赖关系。
3. 应用 loader：
   • 从右到左：多个 loader 会从右到左依次执行。
   • 链式调用：每个 loader 的输出作为下一个 loader 的输入。
4. 生成 AST：生成抽象语法树（AST）。
5. 生成模块代码：根据 AST 生成最终的模块代码。

处理 loaders 的流程

1. 当前模块是否满足某个规则？

   • 如果当前模块满足某个规则，则继续下一步。
   • 如果不满足，则跳过所有 loader，直接进入下一个模块。

2. 读取规则中对应的 loaders

   • 根据当前模块所满足的规则，找到相应的 loader 列表。

3. 加载 loaders 数组

   • 将找到的所有 loader 放入一个数组中。

4. 处理 loader 流程

   • 从右到左依次执行每个 loader。
     • 第一个 loader 接收原始代码作为输入。
     • 每个 loader 执行完后，将其结果作为下一个 loader 的输入。
     • 最终的结果就是经过所有 loader 处理后的源码。

   总的来说，当一个模块满足特定规则时，webpack 会按照配置好的顺序，从右到左依次应用每个 loader，直到获得最终的源码。如果模块不满足任何规则，则不会应用任何 loader。这种机制允许开发者灵活地定义不同类型的文件应该如何被处理。

3. Loader 配置

完整配置

module.exports = {
   
  module: {
    // 针对模块的配置，目前版本只有两个配置&#