外观
Webpack 的一次构建经过哪些步骤？
从入口出发，解析依赖，把各种文件用 Loader 转成模块，组成依赖图，再按分包规则生成产物。Plugin 在这些步骤的钩子里参与。开发时还要加上监视和热更新。
原理
- 读配置，创建 Compiler。
- 从
entry开始，解析import和require，处理别名和扩展名。 - 匹配到的 Loader 从后往前执行，把 TypeScript、CSS、图片转成 JavaScript 能处理的模块。
- 模块组成图之后，按动态
import和splitChunks切成 chunk。 - 输出文件，把运行时和模块包进 bundle。内容哈希写进文件名，供长期缓存。
Plugin 在编译、生成资源、输出文件时收到钩子。Loader 只做单个模块的转换。见 Loader 和 Plugin。
生产模式会做 tree shaking、压缩和作用域提升。开发模式为了速度保留更多模块边界，并启用 HMR。两边产物不一样，性能问题要看生产包。
追问
和 Vite 的开发服务器差在哪？
Webpack 开发时也维护这份依赖图。Vite 开发时按请求转换单个模块，生产才用打包器做完整构建。见 Vite 与 Webpack。
依赖图太大时先看什么？
用包分析看是哪一个入口把库拉进来的，再决定动态导入或换实现。不要先调一堆缓存参数。
易错点
- 以为 Loader 能拿到整个编译对象。它只看到当前模块的源码。
- 开发模式的包大小拿去和线上比。
- 入口配置多了一个库，所有页面的首屏都变大。