首页 > 其他分享 >Webpack 核心流程

Webpack 核心流程

时间：2024-08-22 17:26:34浏览次数：11  
标签：调用 核心 流程 webpack module Webpack 依赖 模块 compiler

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：霜序

三个阶段

初始化阶段

  1. 初始化参数：从配置文件、配置对象、shell 参数中读取，与默认的配置参数结合得出最后的参数。
  2. 创建编译器对象：通过上一步得到的参数创建 Compiler 对象。
  3. 初始化编译器环境：注入内置插件、各种模块工厂、加载配置等。
  4. 开始编译：执行 compiler 对象的 run 方法。
  5. 确定入口：根据配置中的 entry 找到对应的入口文件，使用compilition.addEntry将入口文件转换为 dependence 对象。

构建阶段

  1. 编译模块(make)：根据 entry 对应的 dependence 创建 module 对象，调用 loader 将模块转移成为标准的 JS 内容，在将其转成 AST 对象，从中找出该模块依赖的模块，再递归至所有的入口文件都经历了该步骤。
  2. 完成模块编译：上一步处理完成之后，得到每一个模块被转译之后的内容以及对应的依赖关系图。

生成阶段

  1. 输出资源(seal)：根据入口文件和模块之间的依赖关系，组装成一个个包含多个模块的 chunk，再把每一个 chunk 转换成为单独的一个文件放到输出列表，这是最后一次可以修改输出内容的机会。
  2. 写入文件系统(emitAssets)：确定好了输出内容，根据输出路径和文件名，把文件写入到文件系统。

初始化阶段

file

new webpack(config, callback)

webpack 支持两个参数，config 是 webpack.config.js 中的配置，callback 是回调函数。
webpack 引用于 webpack/lib/webpack.js
file
上图是 webpack() 的流程图，定义了 create 函数
create 函数主要完成

  1. 定义相关的参数
  2. 通过 createCompiler 创建 compiler 对象
  3. 返回 compiler 和其他参数

并会根据 callback 回调执行不同的操作：

  • 如果传入了 callback 参数，会通过 create 方法拿到对应的 compiler 对象，并执行 compiler.run 方法，返回 compiler 对象
    • 在这其中会判断是否配置 watch 参数，如果有会监听文件改变，重新编译
  • 如果没有传入 callback 参数，也会通过 create 方法拿到对应的 compiler 对象，直接返回

因此调用 webpack() 方法有两种方式：

// webpack 函数有传回调函数
const compiler = webpack(config, (err, stats) => {
  if (err) {
    console.log(err)
  }
})

// 执行 webpack 函数没有传回调函数，手动调用一下 compiler.run
const compiler = webpack(config)
compiler.run((err, stats) => {
  if (err) {
    console.log(err)
  }
})

createCompiler

file
在上一步中，调用了 create 方法，compiler 对象实则是通过 createCompiler 函数返回的。
主要逻辑都是在 WebpackOptionsApply.process 中，该方法是将 config 中配置的属性转成 plugin 注入到 webpack 中。
通过 Compiler 类创建了 compiler 对象，通过 constructor 初始化一些内容

  • 使用 tapable 初始化一系列的 hooks。
  • 初始化一些参数。

compiler.run

在第一步的时候，调用 webpack 之后，最后都会调用 compiler.run 方法。
从代码中可以看出来，compiler.run 方法主要做了：

  1. 定义错误处理函数 finalCallback
  2. 定义 onCompiled 作为 this.compile 的回调
  3. 定义 run 方法，执行 run 方法

简单来说，compiler.run 其实最后调用的是 compiler.compile 方法

compiler.compile

compiler.compile 该方法中才开始做 make 处理
从代码中可以看出来，compiler.compile 方法主要做了：

  1. 初始化 compilation 参数，调用new Compilation创建 compilation 对象
  2. 执行 make hook，调用compilation.addEntry方法，进入构建阶段
  3. compilation.seal，执行 seal，对 make 阶段处理过的 module 代码进行封装， chunk 输出最终产物
  4. afterCompile hook，执行收尾逻辑

调用compile函数触发make钩子后，初始化阶段就算是结束了，流程逻辑开始进入「构建阶段」

构建阶段

构建阶段主要使用的 compilation 对象，它和 compiler 是有区别的：

compiler：webpack 刚构建时就会创建 compiler 对象，存在于 webpack 整个生命周期 。
compilation：在准备编译某一个模块的时候才会创建，主要存在于 compile 到 make 这一段生命周期里面。
开启 wacth 对文件进行监听时，文件发生改变需要重新编译时，只需要重新创建一个 compilation 对象即可，不需要重新创建 compiler 对象做很多第一步初始化操作。如果改变了 config，则需要重新执行 dev/build 命令，创建新的 compiler 对象。

file

  1. 当执行初始化阶段的时候WebpackOptionsApply.process的时候会去初始化 EntryPlugin 调用compiler.hooks.make.tapAsync注册 compiler 的 make 钩子，用来开启编译。
  2. 当初始化完成之后调用compiler.compile方法时，会执行this.hooks.make.callAsync，从而开始执行compilation.addEntry添加入口文件。
  3. 调用handleModuleCreation方法，根据文件类型创建不同的 module。
  4. 调用module.build开始构建，通过 loader-runner 转译 module 内容，将各种资源转为 webpack 可以理解的 JavaScript 文本。
  5. 调用 acorn 的parse方法将 JS 代码解析成为 AST 结构。
  6. 通过 JavaScriptParser 类中遍历 AST，触发各种 hooks 。
    • 遇到 import 语句时，触发hooks.exportImportSpecifier。
    • 该 hook 在 HarmonyExportDependencyParserPlugin 插件中被注册，会将依赖资源添加成为 Dependency 对象。
    • 调用module.addDependency将依赖对象加入到 module 依赖列表中。
  7. AST 遍历完毕后，调用module.handleParseResult处理模块依赖。
  8. 对于 module 新增的依赖，调用handleModuleCreate，控制流回到第一步。
  9. 所有依赖都解析完毕后，构建阶段结束。

在整个过程中数据流 module ⇒ AST ⇒ dependency ⇒ module 的转变，将源码转为 AST 主要是为了分析模块的 import 语句收集相关依赖数组，最后遍历 dependences 数组将 Dependency 转换为 Module 对象，之后递归处理这些新的 Module，直到所有项目文件处理完毕。

总结来说就是，从入口文件开始收集其依赖模块，并对依赖模块再进行相同的模块处理。

构建过程
file

例如上图，entry 文件为 index.js，分别依赖 a.js/b.js，其中 a.js 又依赖 c.js/d.js 。
第一步
根据 webpack 初始化之后，能够确定入口文件 index.js，并调用compilation.addEntry函数将之添加为 Module 对象。
file

第二步
通过 acorn 解析 index 文件，分析 AST 得到 index 有两个依赖。
file

第三步
得到了两个 dependence 之后，调用 module[index] 的 handleParserResult 方法处理 a/b 两个依赖对象。
file

第四步
又触发 module[a/b] 的 handleModuleCreation 方法，从 a 模块中又解析到 c/d 两个新依赖，于是再继续调用 module[a] 的 handleParseResult，递归上述流程。
file

第五步
最终得到 a/b/c/d 四个 Module 以及其对应的 dependence。
file
所有的模块构建完毕，没有新的依赖可以继续，由此进入生成阶段。

生成阶段

在构建阶段 make 结束之后，就会进入生成阶段，调用compilation.seal表明正式进入生成阶段。
在 seal 阶段主要是是将构建阶段生成的 module 拆分组合到 chunk 对象中，再转译成为目标环境的产物，并写出为产物文件，解决的是资源输出问题。
file

  1. 构建本次编译的ChunkGraph对象
  2. 通过hooks.optimizeDependencies优化模块依赖关系
  3. 循环compilation.entries入口文件创建 chunks，调用 addChunk 为每一个入口添加 chunk 对象，并且遍历当前入口的 dependency 对象找到对应 module 对象关联到该 chunk
  4. 触发optimizeModules/optimizeChunks等钩子，对 chunk 和 module 进行一系列的优化操作，这些优化操作都是有插件去完成的，例如 SplitChunksPlugin
  5. 调用codeGeneration方法生成 chunk 代码，会根据不同的 module 类型生成 template 代码
  6. 调用createChunkAssets方法为每一个 chunk 生成资产文件
  7. compilation.emitAsset 将产物提交到 compilation.assets 中，还尚未写入磁盘
  8. 最后执行 callback 回调回到 compile 的控制流中，执行 onCompiled 方法中的 compiler.emitAsset 输出资产文件

流转过程

在 webpack 执行的三个阶段，对应着资源形态扭转，每一个阶段操作的对象都是不一样的
file

  • compication.make
    • 以 entry 文件为入口，作为 dependency 放入 compilcation 的依赖列表
    • 根据 dependences 创建 module 对象，之后读入 module 对应的文件内容，调用 loader-runner 对内容做转化，转化结果若有其它依赖则继续读入依赖资源，重复此过程直到所有依赖均被转化为 module
  • compication.seal
    • 遍历所有的 module，根据 entry 的配置以及 module 的类型，分配到不同的 chunk
    • 将 chunk 构建成为 chunkGraph
    • 遍历 chunkGraph 调用 complication.emitAssets 方法标记 chunk 的输出规则，即转化为 assets 集合。
  • compiler.emitAssets
    • 将 assets 输出到文件系统

总结

  • 初始化阶段：负责构建环境，初始化工厂类，注入内置插件
  • 构建阶段：读入并分析 entry 文件，查找其模块依赖，再一次处理模块依赖的依赖，直到所有的依赖都被处理完毕，该过程解决资源输入问题
  • 生成阶段：根据 entry 的配置将模块封装称为不同的 chunk，经过一系列的优化再将模块代码编译成为最终的形态，按 chunk 合并成最后的产物，该过程解决资源输出问题

最后

欢迎关注【袋鼠云数栈UED团队】~
袋鼠云数栈 UED 团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star

标签：调用,核心,流程,webpack,module,Webpack,依赖,模块,compiler
From： https://www.cnblogs.com/dtux/p/18374385

相关文章

  • 数字集成电路设计实践 IIC-Slave接口芯片的全流程设计
    数字集成电路设计实践 IIC-Slave接口芯片的全流程设计一、芯片设计方案IIC原理1.I2C协议I2C协议由Philips公司推出。1.1. 端口名称及含义标准I2C只有2根信号线。SCL：SerialCLock：串行时钟线，由主机产生并分享给从机。SDA：SerialDAta：串行数据线，连接在主从机之间。把发送......
  • Git 全套流程命令Command
    Git全套流程命令Command假设你已经在本地初始化了一个Git仓库，并且已经添加了远程仓库地址。1.初始化本地仓库如果你还没有初始化本地仓库，可以使用以下命令：gitinit2.添加远程仓库地址gitremoteaddorigin<remote-repository-url>例如：gitremoteaddorigi......
  • 高性能无锁队列 Disruptor 核心原理分析及其在i主题业务中的应用
    小结：生产者生产数据时，需要入队。消费者消费数据时，需要出队。入队时，不能覆盖没有消费的元素。出队时，不能读取没有写入的元素。因此，Disruptor中需要维护一个入队索引（生产者数据生产到哪里，对应AbstractSequencer中的cursor）和一个出队索引（所有消费者中消费进度最小的序号）。 ......
  • 2024年关于短信轰炸机原理研究并实现的流程 （290021243
    偶然看到gitHub上面有短信轰炸机源码，于是产生了研究的想法。经过研究源码发现是通过抓包进行第三方网站抓包并且收集，最终进行post/get请求。携带header和token进行第三方网站模拟请求。于是在mac上面下载了fiddler进行代理配置开放了本机ip下的8888商品，用手机同时访问本机ip的......
  • jenkins 自动化流程
     ......
  • 为什么用Vite框架？来看它的核心组件案例详解
    Vite是一个前端构建工具，它以其快速的开发服务器和生产优化的打包器而闻名前端界，今天的内容，必须得唠唠Vite的关键能力，以下是Vite的核心组件分析，以及使用案例：原理分析：Vite利用了现代浏览器对ESModule语法的支持，在开发环境中不进行打包编译，而是通过启动本地devServer......
  • SHELL之流程控制
    一、流程控制类型ifelseififconditionthencommand1command2...commandNfiifelseifconditionthencommand1command2...commandNelsecommandfiifelse-ifelseifcondition1thencommand1elifcondition2......
  • setupres.dll丢失解决方案速递：全面修复流程，从简易排查至高级修复策略
    遇到setupres.dll文件丢失问题，可以按照以下步骤尝试修复：1.系统文件扫描：首先，利用系统自带的文件检查工具来修复潜在的系统文件问题。打开命令提示符（以管理员身份运行），输入sfc/scannow并回车，等待扫描并修复完成。2.Windows更新：确保操作系统是最新版本，因为有时这类问题可通......
  • webpack4升级到webpack5后部分页面出现Uncaught (in promise) ReferenceError: Cannot
    循环依赖当两个或多个模块相互引用时，就会发生JavaScript中的循环依赖（也称为循环依赖）。这可以是直接引用（A->B->A）：或间接( A->B->C->A)：虽然循环依赖可能不会直接导致错误，但它们几乎总是会带来意想不到的后果。这可能表现为TypeScript类型检查缓慢或开发服务器频......
  • 微信答题小程序产品研发全流程
    明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。我前面说过，我仿了一款答题小程序。现在，整理一下微信答题小程序产品研发全流程，分享给迈入或者深耕题库小程序这一领域的小伙伴。题库软件产品开发不仅仅是写代码这一环，它包含从需求调研、分析与构思、设计到开发、测试......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99