运行机制

思想

在 webpack 中本着万物全都是模块的思想，js、css、html、图片、字体这些都是模块，在 Webpack 的整个打包过程中，

  • 通过 Loader 来加载处理各种资源

  • 通过 Plugin 来实现自动化构建任务，如压缩、打包、发布等等

    具体的流程如下：

    1. 形成依赖关系树

  • 首先：找到项目中指定的入口文件，一般情况是 JS 文件。

  • 然后：根据代码中出现的 import (ES Modules) 或者是 require (CommonJs)之类的语句，解析出文件所依赖的资源模块。然后在去解析每一个资源模块的依赖。
  • 最后：周而复始形成一个依赖关系树。

Ciqc1F6pSHiAbuTBACPS6wVVqZw547.gif

2. 解析依赖关系树

  • 首先：Webpack 就会去递归遍历这个依赖树，找到每一个节点对应的资源文件
  • 然后：根据配置选项中的 Loader ，找到相应的 Loader 去加载这个资源模块。
  • 最后：将结果放入到打包结果中。

Ciqc1F6pUBeAfHWtAG70TcGBhSM152.gif

对于模块中无法通过 JS 代码表示的资源模块，一般的 Loader 会将它们单独作为资源文件拷贝到输出目录中，然后将这个资源文件所对应的访问路径作为这个模块的导出成员暴露给外部。

工作原理

  1. Webpack CLI 启动打包流程；
  2. 载入 Webpack 核心模块，创建 Compiler 对象；
  3. 使用 Compiler 对象开始编译整个项目；
  4. 从入口文件开始，解析模块依赖，形成依赖关系树；
  5. 递归依赖树，将每个模块交给对应的 Loader 处理；
  6. 合并 Loader 处理完的结果，将打包结果输出到 dist 目录。

    1. Webpack CLI 启动打包流程

  • Webpack CLI 获取配置参数，解析配置参数，将配置参数转换为 Webpack 的配置对象。