构建原理（Webpack / Babel / 模块化）

本章管什么：打包器机制——Webpack 构建流程、Loader vs Plugin、Tree-shaking、HMR、Babel、IIFE → CJS → AMD → ESM。深度控制为「机制 + 好讲」，不钻源码。

本章不管什么

内容	去哪看
Vite 和 Webpack 怎么选、为什么 Vite 开发快	架构 · 工程化展开
项目性能四块清单、懒加载、虚拟列表	工程化 · 性能
框架选型、Vue2 vs Vue3	架构

建议阅读顺序：先 工程化 知道 Vite/Webpack 区别 → 再从 概念卡 · 构建 按「Webpack 流程 → Loader/Plugin → …」建立地图 → 被追问细节时回本章。

1. Webpack 的打包原理 / 构建流程？

先建立地图

entry 入口 → 递归 import 建依赖图 → 每个文件过 loader 转译 → plugin 在生命周期里加工 → 输出 bundle

流程

从 entry 入口出发，递归分析依赖构建依赖图；每个模块经 loader 转译；plugin 在生命周期钩子里做优化；最后输出 bundle。

阶段：初始化 → 编译（模块解析 + loader）→ 生成 chunk → 输出文件。

🎤 口述精简版

Webpack 从入口顺着依赖把所有模块打包成图，loader 转译、plugin 加工，最后吐出 bundle。

2. Loader 和 Plugin 的区别？

对比

• Loader = 转换器，处理「某个文件怎么变成 JS 能认的模块」（babel-loader、css-loader、vue-loader）
• Plugin = 扩展器，监听构建生命周期钩子做更广的事（HtmlWebpackPlugin、压缩、DefinePlugin）

口诀：Loader 转文件，Plugin 管流程。

🎤 口述精简版

Loader 专管某类文件怎么转成模块；Plugin 挂在构建生命周期上做打包、注入 HTML、压缩这类事。

3. 什么是 Tree-shaking？原理？

概念

打包时去掉没用到的导出，减小产物。依赖 ESM 静态结构（import / export 可静态分析）；CommonJS 动态 require 很难摇干净。

生产要开压缩 / usedExports 一类标记，副作用多的包要配合 sideEffects 声明。

🎤 口述精简版

Tree-shaking 就是摇掉没用到的导出。前提是 ESM 能静态分析；CJS 不好摇。生产还要压缩和正确标 sideEffects。

4. HMR（热更新）原理？

文件改动 → 构建出增量 → 通过 WebSocket 通知浏览器 → 运行时用新模块替换旧模块并保持应用状态，不刷新整页。Vite 基于 ESM 原生更快；Webpack 依赖 HMR runtime 注入。开发体验细节也可对照 Vite 为什么快。

🎤 口述精简版

HMR 是改完代码只换相关模块、尽量不整页刷新。浏览器和开发服用 WebSocket 通信；Vite 借原生 ESM，Webpack 靠自己的 HMR 运行时。

5. babel 是做什么的？@babel/preset-env？

定位

把新语法 / JSX 等转成目标环境能跑的代码（降级 + polyfill 策略）。

@babel/preset-env：按你配置的浏览器目标，决定要转哪些语法、装哪些 polyfill，避免「全量转、全量垫片」。

🎤 口述精简版

Babel 负责把新语法编成旧环境能跑的。preset-env 按目标浏览器按需转换，不用无脑全转。

6. 模块化的发展：IIFE → CommonJS → AMD → ESM？

阶段	特点
IIFE	用闭包隔作用域，无官方模块标准
CommonJS	Node 主流，require / module.exports，运行时加载
AMD	浏览器异步加载（RequireJS），配置重
ESM	语言标准，import / export，可静态分析，利 Tree-shaking

现在前端工程默认讲 ESM；和 Vite 的关系见 工程化，语言对照见 JavaScript · 模块化。

🎤 口述精简版

模块化从 IIFE 自封装，到 CJS、AMD，再到语言级 ESM。现在工程默认 ESM：静态、能摇树，Vite 开发也吃这套。