工程化

从词法、语法和语义分析到 AST 转换、Babel、Webpack loader/plugin 的学习入口。

理解词法分析、语法分析、AST 节点、遍历与代码生成，并把它们用于 codemod、Lint、DSL 和低代码。

掌握 Babel parser/traverse/types/generator 链路、visitor 插件、按需引入变换、测试和 source map 调试。

从 Compiler、Compilation、Module、Chunk、Bundle 到 Loader/Plugin、分包、压缩和可验证的自定义扩展。

从页面 DSL 到编辑器、运行时渲染和发布，梳理低代码平台的核心边界与工程取舍。

把 Canvas 高清绘制、移动端下拉刷新、跨上下文通信、国际化切换和 npm 包发布整理成可实现、可验证的场景题。

从分层边界、PC/移动端差异到测试发布闭环，建立可解释、可演进的前端架构决策方法。

把框架、性能、异步、工程交付和项目技术表述中的常见误区改写成可验证的检查项。

设计覆盖错误、性能、资源、请求和用户行为的前端监控 SDK，并处理采样、隐私、上报与定位。

覆盖组件 API、设计令牌、构建发布、类型声明、可访问性、测试和版本治理的组件库实践。

从镜像、容器、网络和存储四个概念出发，快速掌握 Docker 的常用操作、排障入口与安全边界。

围绕镜像构建、容器生命周期、网络存储、资源限制、内网访问和发布治理，整理 Docker 的可验证工程实践。

极致构建速度，适合预构建、快速打包和开发期转换。（深入阅读：esbuild 的核心定位）

它首先是“高性能构建引擎”，不是完整生态平台。擅长做快速转译、预构建、轻量打包。

A: Go 实现、并行处理、较少 AST 往返和高效工程实现。（深入阅读：esbuild 基础知识速览、esbuild 为什么快）

开发环境基于 ESM 按需加载，不做整包打包；生产环境走 Rollup 做优化产物。（深入阅读：Vite 的工作模型）

Vite 利用浏览器原生 ESM，只有当浏览器请求某个模块时，开发服务器才按需转换该模块并返回。这样避免了 webpack 式“先全量构建再启动”的等待。

A: 原生 ESM 按需加载 + 依赖预构建缓存 + 增量 HMR。（深入阅读：Vite 基础知识速览、开发阶段为什么不先打包）

把模块、样式、图片等资源纳入统一依赖图，做构建、优化和产物管理。（深入阅读：Webpack 的核心能力）

这是一道考察前端工程化基础认知的面试题，需要从历史背景、核心概念、解决的问题三个维度来回答。面试官希望看到你对模块化发展历程的理解，以及对 Webpack 定位和能力的准确把握。

热更新（Hot Module Replacement，HMR）是 Webpack 开发服务器的重要特性，也是面试中的高频考点。面试官希望了解你对 HMR 工作机制的理解，包括：什么是 HMR、如何配置、工作原理、更新流程。

这道题考察对 Webpack 内部工作机制的理解。面试官希望看到你能清晰地描述从配置文件读取到最终产物输出的完整流程，包括初始化、编译构建、输出三个主要阶段，以及各阶段的关键操作。

这道题考察两个核心知识点：webpack-dev-server 的代理功能以及跨域问题的本质和解决方案。面试官希望看到你能解释清楚代理是如何工作的，以及为什么服务器之间的通信不存在跨域问题。

这道题考察对 Webpack Loader 机制的理解。面试官希望看到你能解释清楚：Loader 是什么、常见 Loader 有哪些、它们各自的作用、Loader 的执行顺序。

这道题考察对 Webpack Plugin 机制的理解。面试官希望看到你能解释清楚：Plugin 是什么、常见 Plugin 有哪些、它们各自的作用、Plugin 的工作原理。

这道题是 Webpack 面试的核心考点，需要清晰地对比 Loader 和 Plugin 的定位、执行时机、功能范围，并能够说明如何编写自定义的 Loader 和 Plugin。

这道题考察对 Webpack 性能优化的实践经验。面试官希望看到你能从Loader 优化、Resolve 优化、缓存策略、并行处理等多个维度提出具体的优化方案。

Tree Shaking 是 Webpack 的重要优化特性，考察对代码优化和 ES Modules 静态特性的理解。

Plugin 是 Webpack 的核心扩展机制，通过插件可以扩展 Webpack 的各种功能。面试官通过此题考察候选人对 Webpack 生态的了解程度以及实际项目经验。

Loader 和 Plugin 是 Webpack 中两个核心但容易混淆的概念。面试官通过此题考察候选人对 Webpack 架构设计的理解深度。

Webpack 构建流程是理解 Webpack 工作原理的核心。面试官通过此题考察候选人对 Webpack 内部机制的掌握程度，以及是否具备源码级理解能力。

开发效率是工程化的重要目标之一。面试官通过此题考察候选人对开发体验优化的实践经验，以及是否了解 Webpack 生态中提升开发效率的工具。

Source Map 是前端工程化中的重要概念，关系到代码调试和错误监控。面试官通过此题考察候选人对调试机制的理解，以及生产环境的安全意识。

模块打包原理是理解 Webpack 核心机制的关键。面试官通过此题考察候选人对模块化实现原理的深入理解，以及是否具备源码级分析能力。

文件监听是 Webpack 开发模式的核心功能，实现代码变更后的自动重新编译。面试官通过此题考察候选人对 Webpack 开发服务器工作机制的理解。

热模块替换（HMR, Hot Module Replacement）是 Webpack 开发环境的核心特性，实现代码修改后无需刷新页面即可更新。面试官通过此题考察候选人对 Webpack 底层通信机制的理解。

Bundle 体积直接影响页面加载性能和用户体验。面试官通过此题考察候选人对性能优化的关注程度，以及是否具备使用专业工具分析和监控 bundle 体积的能力。

文件指纹是 Webpack 打包后输出文件名的后缀，用于解决浏览器缓存问题。通过给文件名添加唯一的哈希标识，可以在文件内容变化时强制浏览器重新加载资源。

在复杂的 Webpack 配置中，loader 的执行顺序至关重要。当配置文件达到上百行时，确保 loader 按照预期顺序执行是工程化实践中的关键问题。

Webpack 构建速度优化是前端工程化的核心问题。随着项目规模增大，构建时间可能从几秒延长到几分钟，严重影响开发体验。优化构建速度需要从多个维度入手。

代码分割（Code Splitting）是 Webpack 的核心特性之一，它解决了源代码直接上线和打包成唯一脚本两种极端方案的问题，在服务器性能和用户体验之间找到平衡点。

Loader 是 Webpack 的核心概念之一，用于对模块的源代码进行转换。理解如何编写 loader 是深入掌握 Webpack 的重要一步。

Plugin 是 Webpack 的支柱功能，用于在构建过程中执行更广泛的任务。与 Loader 专注于文件转换不同，Plugin 可以访问整个构建生命周期，实现更强大的功能。

Babel 是 JavaScript 编译器，用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。理解 Babel 的工作原理对于前端工程化至关重要。

除了核心概念外，Webpack 还涉及许多重要的工程化实践和高级特性。本文对 Webpack 知识体系进行补充扩展。

从 entry 出发构建模块依赖图，经过 loader 转换、plugin 扩展，最终产出 chunk 与静态资源。

A: Loader 处理模块内容转换，Plugin 介入构建生命周期做扩展。（深入阅读：Loader 和 Plugin 的区别、编写 Loader 与 Plugin）

根据编号 9《Webpack 面试真题》补充 HMR、构建对象、资源处理、构建优化和 Webpack 生态选型中的场景追问。