手动使用webpack

2024/2/21 webpack

webpack 的实际入口是 Compiler 中的 run 方法,run 一旦执行后,就开始了编译和构建流程 ,其中有几个比较关键的 webpack 事件节点。

  • compile 开始编译
    • 目的:这是整个编译过程的开始,意味着开始将源代码转换为可执行代码或目标代码。
    • 操作:读取源代码文件,并开始进行初步的解析和处理。
  • make 从入口点分析模块及其依赖的模块,创建这些模块对象
    • 目的:确定项目的依赖关系,并创建模块对象以供后续处理。
    • 操作:工具(如Webpack)会分析源代码中的import或require语句,分析项目的依赖关系,并确定哪些模块需要被编译。为每个模块创建一个对象,这个对象包含了该模块的所有相关信息。
  • build-module 构建模块
    • 目的:对每个模块的源代码进行处理和转换。
    • 操作:这一步包括将模块的源代码进行转换、优化、合并等操作。例如,Babel会在此阶段将ES6+的语法转换为ES5语法。
  • after-compile 完成构建
    • 目的:在所有模块都构建完成后执行一些全局的操作。
    • 操作:例如,可能会进行全局的代码优化、清理临时文件等。
  • seal 封装构建结果
    • 目的:将构建的结果进行封装,以便于部署和分发。
    • 操作:可能会将所有的模块和资源打包到一个或多个文件中,并进行压缩、优化等操作。
  • emit 把各个chunk输出到结果文件
    • 目的:将各个模块或chunk输出到结果文件。
    • 操作:工具会根据其内部的依赖关系,将每个chunk(例如,由多个模块组成的代码块)输出到指定的结果文件。
  • after-emit 完成输出
    • 目的:在所有chunks都输出到结果文件后执行一些后续操作。
    • 操作:例如,可能会复制生成的资源到输出目录、执行一些清理任务等。

webpack编译会创建两个核心对象: compiler:包含了webpack环境的所有的配置信息,包括options,loader和plugin,和webpack整个生命周期相关的钩子 compilation:作为plugin内置事件回调函数的参数,包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化,一次新的Compilation将被创建

上次更新: 2024/4/13 07:03:33