webpack 原理

webpack 文件 webpack 把每个依赖文件包装成一个函数然后在 bundle.js 中执行（IIFE）， IIFE 会传入 module, module.exports, require 三个参数，分别表明 模块自身、模块导出的内容、webpack 自己实现的 require - 用于引用文件 webpack 自定义了 require 函数：webpack_require，传入模块id webpack 通过抽象语法树来识别文件依赖，然后导入。普通的正则匹配无法识别字符串等情况的 import xx from './' @babel/parse 将文件字符串解析成抽象语法树 ast @babel/traverse 遍历抽象语法树，遇到特定的语法，比如 import 声明，可以指定对应的回调 webpack 使用广度优先搜索来构建完整依赖图

补充

补充：webpack 本质是一个基于事件流的静态模块打包器，核心原理可概括为以下几步：

1. 入口与依赖图：从配置的 entry 出发，递归读取每个模块的 import / require，构建完整的依赖图。
2. Loader 链：每个非 JS 资源（CSS、Vue、TS、图片等）经配置的 loader 链转换（如 style-loader / css-loader），最终产出标准 JS 模块。
3. AST 分析：使用 acorn / @babel/parser 把源码解析为 AST，识别 import、动态 import()、CommonJS require 等依赖声明。
4. Chunk 与产物：根据 entry 与 splitChunks 规则把所有模块组合成若干 chunk，再由 Template 渲染为最终 JS（webpack 4 以前用 IIFE 形式把所有模块包进 bundle.js，通过自实现的 __webpack_require__ 互相引用；webpack 5 之后默认开启 output.module 可输出 ESM，并大量使用 Map、Set 替代数组）。
5. 插件机制：基于 Tapable 的发布订阅模式，在 Compiler / Compilation 生命周期各阶段（beforeRun、compile、emit、done 等）触发钩子，插件可监听这些事件做资源注入、产物修改、性能分析等。
6. HMR（开发增强）：监听文件变化后通过 WebSocket 把变更的 chunk 推送给浏览器，由浏览器侧的 HMR runtime 热替换对应模块，避免整页刷新。

一句话：webpack = 依赖图 + Loader 转换 + AST 解析 + Chunk 拼装 + 插件扩展。

来源整理自：我的有道云笔记