返回

webpack 系列之五：module 的生成（下）

前端

在上一篇《webpack 系列之五：module 的生成（上）》中，我们分析了 webpack 是如何根据 entry 配置找到对应的文件的。这一篇我们将继续深入探讨 webpack 如何将文件转换为 module。这个过程可以分成几个阶段：

  1. create：准备数据，生成 module 实例。
  2. add：信息保存到 Compilation 对象。
  3. dispose：清理无用信息，释放资源。

create

在这个阶段，webpack 将读取文件内容，并根据其类型创建相应的 module 实例。比如，对于 JavaScript 文件，它将创建一个 JavaScriptModule 实例。在创建 module 实例时，webpack 会收集一些基本信息，如文件路径、内容、依赖项等。

add

创建好 module 实例后，webpack 会将其添加到 Compilation 对象中。Compilation 对象是一个数据结构，用来存储有关编译过程的所有信息，包括所有 module、chunk 和 asset。

dispose

在编译过程结束时，webpack 会调用 module 的 dispose 方法。这个方法用来清理无用信息，释放资源。比如，JavaScriptModule 的 dispose 方法会删除不再需要的 AST 树。

moduleFactory

在 webpack 4 中，引入了一个新的概念：moduleFactory。moduleFactory 是一个函数，它可以创建新的 module 实例。这使得 webpack 能够更灵活地创建 module，并支持不同的模块类型。

总结

module 的生成是 webpack 编译过程中的一个重要阶段。通过理解这个过程，我们可以更好地理解 webpack 的工作原理，并解决我们在开发过程中遇到的问题。

参考文献