webpack的建设组织：如何webpack -> compiler -> compilation工作
2023-12-27 07:18:22
webpack是前端开发中常用的模块打包工具，它可以将各种类型的文件，如JavaScript、CSS和图像，打包成一个或多个优化后的文件，以便在浏览器中加载和执行。webpack的构建过程是一个复杂的过程，涉及到多个步骤和组件。在这篇文章中，我们将深入了解webpack的构建组织，看看webpack是如何通过compiler和compilation来实现模块打包的。
webpack -> compiler -> compilation
webpack的构建过程从webpack(options)开始，其中options是webpack的配置选项。webpack(options)会创建一个compiler实例，compiler实例代表整个webpack构建过程。compiler实例会创建一个compilation实例，compilation实例代表一次完整的webpack构建。
compilation实例是webpack构建过程的核心，它负责加载和处理webpack配置文件，解析模块依赖关系，应用webpack插件，以及最终生成打包后的文件。compilation实例包含了许多属性和方法，用于控制和管理webpack的构建过程。
webpack构建流程
webpack的构建流程主要分为以下几个步骤：
- 初始化compilation实例
- 加载webpack配置文件
- 解析模块依赖关系
- 应用webpack插件
- 生成打包后的文件
在初始化compilation实例之后，webpack会加载webpack配置文件。webpack配置文件是一个JavaScript文件，用于配置webpack的构建过程。webpack配置文件中可以指定入口文件、输出目录、模块加载器、插件等。
加载webpack配置文件之后，webpack会解析模块依赖关系。webpack会从入口文件开始，解析每个模块的依赖关系。当解析到一个新模块时，webpack会检查这个模块是否已经被解析过。如果已经被解析过，webpack会跳过这个模块。如果没有被解析过，webpack会继续解析这个模块的依赖关系。
解析完模块依赖关系之后，webpack会应用webpack插件。webpack插件是一个JavaScript模块，可以扩展webpack的功能。webpack插件可以用来做各种事情，比如压缩代码、添加水印、生成源映射等。
应用完webpack插件之后，webpack会生成打包后的文件。webpack会根据webpack配置文件中的配置，将解析到的模块打包成一个或多个优化后的文件。这些文件可以是JavaScript文件、CSS文件、图像文件等。
总结
webpack的构建组织是复杂而精妙的。通过compiler和compilation这两个核心组件，webpack可以实现模块打包的各个步骤。了解webpack的构建组织，可以帮助我们更好地理解webpack的工作原理，并更好地使用webpack进行前端开发。
