全网爆火前端面试全集，逐级进阶，吃透就能斩获高薪岗

煎饼bingo

359人浏览 · 2026-06-08 17:12:30

煎饼bingo · 2026-06-08 17:12:30 发布

各位打工人，下午好呀

新的一周又开始，金三银四虽然已经过去，但是

为了金九银十，咱们现在就学习起来

收藏量破万的前端面试题库，涵盖 HTML/CSS/JS/TS/Vue/React/项目/算法/性能/AI /打包工具共11大模块，按难度分级。

编编将做更新面试题系类，持续更新以下面试题答案

一、HTML 高频面试题

初级

DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？
<script> 标签的 async 和 defer 属性有什么区别？应该优先使用哪个？
什么是语义化标签？使用语义化标签有什么好处？
<meta> 标签有哪些常见用法？
href 和 src 的区别是什么？
行内元素和块级元素有什么区别？有哪些行内元素和块级元素？
title 和 h1 的区别是什么？可以只用 title 不用 h1 吗？
HTML5 新增了哪些标签？
对比 <img> 和 background-image 的使用场景，什么时候该用哪个？
什么是 HTML 实体？什么场景下必须使用 HTML 实体？

中级

浏览器的渲染过程是什么？DOM 树和 CSSOM 树是如何合成的？
什么是 FOUC（Flash of Unstyled Content）？如何避免？
script 标签放在 head 和 body 底部有什么区别？会对页面造成什么影响？
什么是 HTML 缓存？如何利用 ETags、Last-Modified 提升缓存效率？
对比 localStorage、sessionStorage、cookies 三者的区别和使用场景。
<input> 和 <textarea> 的区别是什么？如何实现 textarea 的自适应高度？
HTML 中的 data-* 属性有什么作用？如何用 JavaScript 读取和修改？
什么是 Web Components？Shadow DOM 的作用是什么？
什么是"可访问性"（Accessibility / a11y）？前端开发中如何提升页面可访问性？
对比 HTML5 postMessage 和传统 iframe 通信方式，说说各自的优缺点。

高级

浏览器的 Reflow（回流）和 Repaint（重绘）有什么区别？哪些操作会触发 Reflow？
什么是"渲染阻塞"（Render Blocking）？如何通过 CSS 和 JS 优化渲染阻塞？
详细描述从输入 URL 到页面渲染完成的完整过程，越详细越好。
什么是 Service Worker？它和 Web Worker 有什么区别？可以用来做什么？
什么是 WebSocket？和 HTTP 长轮询相比，WebSocket 的优势在哪里？
什么是 MutationObserver？它和 Mutation Events 有什么区别？
浏览器的"预解析"（Preload/Prefetch/DNS-Prefetch）机制是如何工作的？
什么是 <link rel="preload"> 和 <link rel="preconnect">？分别用在什么场景？

点击下方小卡片免费获取2026年最新前端面试资料前端资料https://mp.weixin.qq.com/s/iBmSycbmeTCSRNKJQ10EuA

二、CSS 高频面试题

初级

CSS 选择器的优先级是如何计算的？!important 会覆盖所有优先级吗？
display: none 和 visibility: hidden 有什么区别？
position: relative、absolute、fixed、sticky 有什么区别？各自参照的定位上下文是什么？
什么是 BFC（Block Formatting Context）？它有什么特性？哪些情况会触发 BFC？
Flex 布局的 flex-grow、flex-shrink、flex-basis 分别代表什么？
CSS 盒子模型是什么？box-sizing: border-box 和 content-box 有什么区别？
清除浮动的方法有哪些？为什么清除浮动是必要的？
px、em、rem、vw、vh 的区别和使用场景是什么？
什么是 CSS 垂直居中？至少说出三种实现方式。
:nth-child() 和 :nth-of-type() 有什么区别？

中级

Flex 布局和 Grid 布局各自适合什么场景？Grid 的核心概念是什么？
CSS 层叠上下文（Stacking Context）是什么？z-index 在什么情况下会失效？
什么是 CSS Modules？它解决了什么问题？和 BEM 命名规范有什么区别？
如何实现三栏布局（圣杯布局 / 双飞翼布局）？用 Flex 或 Grid 怎么做？
CSS 动画的 animation 和 transition 有什么区别？各自适合什么场景？
什么是 CSS 变量（Custom Properties）？它有什么实际应用场景？
transform、opacity、filter 会对合成层（Compositor Layer）产生什么影响？
如何用 CSS 实现常见的 UI 效果，例如阴影、圆角、渐变、毛玻璃？
什么是 @layer？CSS 层叠规则在 @layer 环境下有什么变化？
为什么重排（Reflow）比重绘（Repaint）更消耗性能？什么情况下只能触发重绘而无法避免？

高级

CSS 渲染性能优化：有哪些方法可以减少重排和重绘的开销？
详细解释 CSS 动画的合成层提升机制，什么条件下会触发合成层？
CSS Houdini 是什么？它的 Paint API 和 Properties & Values API 能解决什么问题？
如何用 CSS 实现复杂的图形和动画（例如进度环、loading 动画）？
什么是 CSS Containment？contain 属性有哪些值？分别用在什么场景？
对比 @import 和 <link> 加载 CSS 的区别，为什么生产环境应该避免 @import？
CSS 预处理器（Sass/Less/Stylus）的优缺点是什么？原生 CSS 变量能否完全替代它们？
什么是 Container Queries？它和 Media Queries 有什么区别？解决了什么痛点？

三、JavaScript 高频面试题

初级

var、let、const 三者的区别是什么？什么是变量提升？
JavaScript 的数据类型有哪些？如何判断一个变量的类型？
== 和 === 有什么区别？为什么更推荐使用 ===？
什么是闭包？闭包有什么应用场景？
this 的指向有哪几种情况？如何改变 this 的指向？
undefined 和 null 有什么区别？什么时候应该用 null？
什么是事件冒泡和事件捕获？如何阻止事件冒泡？
for...in 和 for...of 有什么区别？什么时候该用哪个？
什么是原型链？__proto__ 和 prototype 有什么区别？
什么是防抖和节流？分别用在什么场景？如何实现？

中级

ES6 新增了哪些特性？请详细说明至少 5 个。
什么是 Promise？Promise.all、Promise.race、Promise.allSettled 有什么区别？
什么是 async/await？它和 Promise 有什么关系？
什么是事件循环（Event Loop）？宏任务和微任务有什么区别？
什么是浅拷贝和深拷贝？如何实现深拷贝？
new 操作符具体做了什么？
什么是箭头函数？它和普通函数有什么区别？
call、apply、bind 有什么区别？请手写一个 bind 的实现。
什么是函数柯里化（Currying）？有什么应用场景？
什么是垃圾回收？JavaScript 的垃圾回收机制是怎样的？

高级

手写一个符合 Promise/A+ 规范的 Promise 实现。
什么是迭代器（Iterator）和生成器（Generator）？它们有什么用？
什么是 Proxy？用它可以实现哪些功能？
什么是 WeakMap 和 WeakSet？它们和普通 Map、Set 有什么区别？
什么是执行上下文和调用栈？它们在 JavaScript 引擎中是如何工作的？
如何实现一个简易的依赖收集系统（类似 Vue 响应式原理）？
什么是 SharedArrayBuffer 和 Atomics？它们解决了什么问题？
什么是尾调用优化（Tail Call Optimization）？JavaScript 引擎中它被支持的程度如何？

四、TypeScript 高频面试题

初级

TypeScript 和 JavaScript 有什么区别？为什么需要 TypeScript？
什么是类型注解（Type Annotation）和类型推断（Type Inference）？
interface 和 type 有什么区别？各自的使用场景是什么？
什么是联合类型（Union Type）和交叉类型（Intersection Type）？
unknown 和 any 有什么区别？为什么更推荐使用 unknown？
什么是枚举（Enum）？枚举有哪些类型？
什么是泛型（Generics）？请举例说明泛型的基本用法。
type 和 interface 都能定义函数类型，两种写法有什么区别？
TypeScript 中的 null 和 undefined 有什么区别？
如何声明一个只读数组？请对比 ReadonlyArray 和 as const。

中级

什么是条件类型（Conditional Types）？举例说明 infer 的用法。
什么是映射类型（Mapped Types）？它有什么应用场景？
如何实现一个工具类型，例如 Partial<T>、Required<T>、Pick<T, K>、Omit<T, K>？
keyof 和 typeof 有什么区别？各自用在什么场景？
什么是装饰器（Decorators）？在 Angular 和 NestJS 中装饰器有哪些应用？
TypeScript 的类型守卫（Type Guards）是什么？有哪些常见的类型守卫方式？
如何处理 API 返回的数据类型？请说明泛型和类型断言的用法。
什么是模块声明（declare module）？如何为第三方库编写类型声明文件？
TypeScript 配置文件 tsconfig.json 中，strict、noImplicitAny、strictNullChecks 分别控制什么？
enum 和 const enum 有什么区别？生产环境应该优先使用哪个？

高级

手写实现一个 DeepPartial<T> 类型，让嵌套对象的所有属性都变为可选的。
什么是模板字面量类型（Template Literal Types）？它有什么实际应用？
TypeScript 的类型推断有哪些局限性？你是如何在团队中平衡类型安全和开发效率的？
什么是协变（Covariance）和逆变（Contravariance）？TypeScript 中的函数类型如何体现？
如何设计一个类型安全的 API 请求层（包含请求、响应、错误处理）？
TypeScript 5.x 新增了哪些特性？和你之前用过的版本相比有什么改进？
什么是可辨识联合（Discriminated Union）？它为什么能提升类型安全性？
如何用 TypeScript 实现一套完整的表单验证系统（类型 + 校验规则）？

点击下方小卡片免费获取2026年前端面试资料前端资料https://mp.weixin.qq.com/s/iBmSycbmeTCSRNKJQ10EuA

五、Vue 高频面试题

初级

Vue 的核心是什么？对比 Vue 2 和 Vue 3 的响应式原理有什么区别。
什么是 MVVM 模式？Vue 是如何体现 MVVM 的？
Vue 实例的选项有哪些？（例如 data、computed、methods、watch、生命周期等）
v-if 和 v-show 有什么区别？分别适用于什么场景？
v-for 和 v-if 为什么不推荐一起使用？有什么替代方案？
Vue 中如何实现父子组件通信？（props + $emit / v-model）
什么是插槽（Slot）？slot 和 slot-scope 在 Vue 2 和 Vue 3 中有什么区别？
computed 和 watch 有什么区别？各自的使用场景是什么？
什么是 nextTick？它的实现原理是什么？
Vue 3 的 Composition API 和 Options API 有什么区别？

中级

Vue 的生命周期有哪些？created 和 mounted 有什么区别？beforeDestroy 和 destroyed 用来做什么？
Vue 3 的 ref 和 reactive 有什么区别？什么时候该用哪个？
什么是 provide / inject？它解决了什么问题？有什么使用注意事项？
Vue 中如何实现跨级组件通信（event bus / Vuex / Pinia）？
Vue Router 的导航守卫有哪些？beforeEach、beforeEnter、beforeRouteEnter 的区别是什么？
什么是 Vuex / Pinia？它们解决了什么问题？两者有什么区别？
Vue 的 Diff 算法是如何工作的？为什么 Vue 的 Diff 算法比直接替换 DOM 性能更好？
什么是自定义指令（Directive）？Vue 3 中的自定义指令和 Vue 2 有什么变化？
如何在 Vue 中实现权限控制（路由权限 + 按钮权限）？
Vue 3 的 Teleport 是什么？有什么实际应用场景？

高级

Vue 3 的响应式系统是如何实现的？（Proxy + Reflect + 依赖收集 + 触发更新）
Vue 的虚拟 DOM 是什么？它是如何工作的？为什么它比直接操作真实 DOM 更快？
Vue 的 runtime-dom 和 runtime-core 有什么区别？
Vue 3 的 shallowRef 和 triggerRef 有什么作用？什么场景下会用到？
什么是 Pinia？相比 Vuex 4，它的改进在哪里？为什么现在更推荐使用 Pinia？
Vue SSR（服务端渲染）和 CSR（客户端渲染）有什么区别？Nuxt 3 的工作原理是什么？
Vue 项目中如何做性能优化？（组件懒加载、大列表虚拟滚动、图片优化、代码分割等）
什么是 Vite？它的热更新原理是什么？为什么 Vite 比 Webpack 快那么多？

六、React 高频面试题

初级

React 的核心思想是什么？它和 Vue 最大的区别在哪里？
什么是 JSX？为什么需要 JSX？JSX 最终会被编译成什么？
函数组件和类组件有什么区别？各自有什么优缺点？
useState 和 useReducer 有什么区别？什么情况下应该用 useReducer？
什么是受控组件和非受控组件？分别用在什么场景？
React 中的 key 有什么作用？为什么遍历渲染时必须提供 key？
useEffect 和 useLayoutEffect 有什么区别？
useCallback 和 useMemo 有什么区别？什么时候应该使用它们？
React 的事件处理和原生 DOM 事件有什么区别？
什么是 React 的单向数据流？为什么要遵循单向数据流？

中级

React 的生命周期有哪些？（旧版 vs 新版）componentWillReceiveProps 为什么被废弃？
React 16 新增了哪些特性？（Fiber、Error Boundaries、Portal、Fragment、Hooks 等）
React 18 的 Concurrent Mode（并发模式）是什么？它解决了什么问题？
React 18 的 useTransition 有什么作用？它和 useDeferredValue 有什么区别？
什么是 Context？它有什么性能问题？如何优化 Context 的使用？
React 中的 forwardRef 有什么用？在什么场景下需要用到？
React 的性能优化手段有哪些？（React.memo、useMemo、useCallback、Code Splitting 等）
Redux 的三大原则是什么？Redux Toolkit 相比传统 Redux 有哪些改进？
React Router v6 相比 v5 有什么重大变化？
什么是 React Server Components？它和传统 SSR 有什么区别？

高级

React 的 Fiber 架构是什么？它是如何实现异步可中断渲染的？
React 的 Diff 算法是如何工作的？为什么 React 不直接操作真实 DOM？
React 的调度器（Scheduler）是如何实现的？它如何决定任务优先级？
如何设计一个符合 React 思想的状态管理方案？（Redux/Zustand/Jotai/Recoil 选择与对比）
React 中的 Suspense 和 lazy 的工作原理是什么？流式 SSR 中 Suspense 是如何配合使用的？
Webpack/Vite/Parcel 等构建工具在 React 项目中各自承担什么角色？
React 18 的 startTransition 和 flushSync 有什么区别？什么场景下会用到？
如何对 React 项目做性能分析和优化？（Profiler、Chrome DevTools、React DevTools）

七、项目实战高频面试题

初级

你在项目中是如何做技术选型的？考虑哪些因素？
项目中遇到过最难的技术问题是什么？你是怎么解决的？
你是如何管理项目的依赖版本和依赖更新的？
你是如何做 Code Review 的？Code Review 的关注点有哪些？
你们项目使用的是什么开发规范（ESLint + Prettier）？团队如何统一代码风格？
项目中如何做错误处理和异常监控？
你是如何处理前后端分离项目的接口联调问题的？
你在项目中用过哪些构建工具（Webpack/Vite/Rollup）？为什么选它？
项目上线前需要做哪些准备工作？发布流程是怎样的？
你是如何在项目中平衡技术债和业务进度的？

中级

你是如何设计一个前端项目的目录结构的？有哪些原则可以参考？
在大型项目中，你是如何看待和引入新技术的？有哪些判断标准？
你在项目中是如何实现登录和权限控制的？Token 过期如何处理？
项目中遇到需求变更或技术方案推翻重来的情况，你是如何应对的？
你在项目中做过哪些自动化方面的工作？（CI/CD、自动化测试、自动化部署等）
你是如何做前后端接口约定的？遇到过接口不规范的情况吗？怎么处理的？
微前端（Micro Frontends）你们有实践过吗？用的什么方案？解决了什么问题？
你是如何做项目性能监控的？用了哪些工具？（Sentry、Web Vitals、Performance API 等）
在多人协作的前端项目中，你是如何保证代码质量和交付效率的？
SSR 和 CSR 你们项目用了吗？为什么选择这种方案？遇到过哪些坑？

高级

你是如何设计一个前端中后台系统的架构的？请描述整体技术方案。
如何从零到一搭建一个团队的前端工程化体系？（脚手架、规范、CI/CD、监控、文档）
你是如何评估前端项目的技术价值的？有哪些量化指标？
在 BFF（Backend For Frontend）架构中，前端开发者需要承担哪些职责？
前端监控体系如何设计？（异常监控 + 性能监控 + 业务数据监控）
你是如何在团队中推广 TypeScript 的？遇到了哪些阻力？如何解决的？
前端团队的技术规划和版本规划是如何做的？如何平衡业务需求和技术建设？
大型前端项目的多人协作开发中，如何避免代码冲突和版本管理混乱的问题？

八、算法高频面试题

初级

数组去重有哪些方法？至少说出三种。
如何实现一个深拷贝函数？
手写一个防抖（debounce）函数。
手写一个节流（throttle）函数。
手写一个字符串的全排列或全组合函数。
如何判断一个链表是否有环？
合并两个有序数组/链表。
反转链表（手写代码）。
找出一个数组中的第 K 大元素。
什么是斐波那契数列？如何用非递归的方式实现？

中级

什么是二叉树的层序遍历（广度优先遍历）？如何用队列实现？
二叉树的前序、中序、后序遍历（递归 + 迭代）。
手写一个 LRU（最近最少使用）缓存。
什么是哈希表（HashMap）？如何用哈希表解决哈希冲突？
排序算法：手写快速排序、归并排序、堆排序，并分析时间复杂度。
什么是动态规划？用一个经典问题（如爬楼梯、编辑距离）说明动态规划的思路。
什么是贪心算法？贪心和动态规划有什么区别？
二分查找：手写标准二分查找，并说明在什么情况下二分查找会失效。
什么是前缀和（Prefix Sum）？它可以用在哪些场景？
图的深度优先遍历（DFS）和广度优先遍历（BFS）如何实现？

高级

手写一个 Promise 调度器，实现并发控制（限制同时运行的任务数量）。
如何在 O(n) 时间内找到数组中的第 K 大元素？（快速选择算法）
什么是红黑树？它和普通二叉搜索树有什么区别？JavaScript 中哪里用到了红黑树？
什么是字典树（Trie）？它可以用在哪些场景？
岛屿类问题（LeetCode 经典）：如何用 DFS 和并查集分别解决？
什么是滑动窗口算法？用它可以解决哪些类型的问题？
股票买卖问题（LeetCode Best Time to Buy and Sell Stock 系列）：如何用 DP 统一解决？
如何设计一个正则表达式引擎？（NFA/DFA 概念）

九、性能优化高频面试题

初级

前端性能优化可以从哪些维度入手？列举常见的优化手段。
什么是首屏加载时间（FCP / FMP）？如何优化首屏渲染速度？
图片优化有哪些方式？（懒加载、CDN、压缩、格式选择、WebP 等）
什么是代码分割（Code Splitting）？Webpack 和 Vite 中如何配置？
什么是 Tree Shaking？它是如何工作的？写代码时有哪些注意事项能让 Tree Shaking 效果更好？
什么是懒加载？图片懒加载和路由懒加载分别怎么实现？
CSS 和 JavaScript 的加载顺序会影响页面性能吗？如何优化？
什么是 CDN？为什么使用 CDN 可以提升页面加载速度？
如何减少 HTTP 请求数量？有哪些具体手段？
什么是 DNS 预解析（dns-prefetch）？如何使用？

中级

什么是 Core Web Vitals（Web Vitals）？LCP、FID、CLS 分别代表什么？合格标准是多少？
浏览器缓存策略有哪些？（强缓存、协商缓存、Service Worker 缓存）各自的优先级是什么？
如何定位和解决前端内存泄漏问题？常见的内存泄漏场景有哪些？
长列表优化有哪些方案？（虚拟滚动、防抖、懒加载、时间分片）
什么是 requestIdleCallback？它可以用在什么场景？
大量数据渲染时，如何避免页面卡顿？React/Vue 中分别怎么处理？
前端性能监控指标有哪些？（Performance API、Lighthouse、Web Vitals）
什么是 Prefetch 和 Preload？它们有什么区别？各自用在什么场景？
SSR 项目的性能优化有哪些特殊注意点？（服务端缓存、TTFB、首屏数据获取等）
前端项目中如何做代码覆盖率统计？覆盖率数据有什么参考价值？

高级

详细描述一次完整的 Webpack 构建优化实战（减少打包体积、提升构建速度、优化 Loader 和 Plugin）。
Vite 在生产构建时和开发环境有哪些不同？生产构建如何进一步优化？
什么是 HTTP/2？HTTP/2 的多路复用和 HTTP/1.1 的管线化有什么区别？
如何设计一个前端性能监控平台？（数据采集、数据上报、数据可视化、告警机制）
什么是关键渲染路径（Critical Rendering Path）？如何优化关键渲染路径？
Canvas 和 SVG 的性能差异在哪里？什么场景下该选哪个？
React 和 Vue 各自的渲染性能优化有哪些高级手段？（Virtual DOM 优化、编译时优化、运行时优化）
前端安全和性能有什么关系？（XSS、CSRF 对性能的影响，安全防护对页面加载的影响）

十、AI + 前端高频面试题

初级

你在项目中有没有使用过 AI 辅助开发？具体用在了哪些场景？
什么是 Prompt Engineering？在前端开发中，AI Prompt 有哪些实用技巧？
常见的 AI 编程工具有哪些？你用过哪些？各有什么优缺点？
如何用 AI 生成前端组件代码？AI 生成的代码有哪些潜在风险？
什么是 RAG（检索增强生成）？它在前端中有哪些应用场景？
前端开发者需要掌握哪些 AI 相关的基础知识？
你是如何看待 AI 工具对前端开发效率的影响的？实际带来了多少提效？
什么是大语言模型（LLM）的 Token 概念？为什么它对 AI 使用很重要？
AI 在前端测试中可以用在哪些场景？（自动生成单元测试、UI 测试、端到端测试）
前端开发者如何利用 AI 做技术调研和方案设计？点击达到
点击下方小卡片免费获取2026年最新前端面试资料前端资料https://mp.weixin.qq.com/s/iBmSycbmeTCSRNKJQ10EuA

中级

如何在前端项目中集成 AI 能力？请描述一种可行的技术方案。
AI 生成的代码为什么需要 Code Review？你是如何审核 AI 生成的前端代码的？
什么是 AI Agent？在前端开发中，AI Agent 可以承担哪些工作？
前端项目中如何做到 AI 功能的优雅降级？（API 不可用、超时、模型错误等）
什么是 Function Calling（函数调用）？在前端调用 AI 时如何用它对接真实工具和数据？
前端项目中如何做到 AI 响应的流式输出？（SSE、WebSocket、ReadableStream）
如何评估 AI 功能的效果和可靠性？有哪些指标可以衡量？
你认为 AI 工具对前端工程师的能力要求有什么变化？未来前端开发者需要掌握什么新技能？
前端中如何实现一套稳定的 AI Prompt 管理和迭代机制？
什么是思维链（Chain of Thought）？在前端 AI 应用中如何设计有效的思维链？

高级

如何从零设计一个 AI 辅助的前端开发平台？请描述整体架构和技术选型。
前端如何对接多种大语言模型（OpenAI / Claude / Gemini / 本地模型）并做到统一封装？
什么是 MCP（Model Context Protocol）？前端开发者如何利用 MCP 扩展 AI 的能力边界？
前端中如何实现 AI 功能的灰度发布和 A/B 测试？
如何在前端项目中构建一套私有的 AI 代码审查或注释生成系统？
端侧 AI（如 WebAI、WASM 推理）在前端中有哪些落地场景？它的局限性在哪里？
前端开发者如何借助 AI 实现从"写代码"到"设计系统"的跃迁？
未来三到五年，前端领域在 AI 影响下会出现哪些新的方向或岗位？

十一、Webpack & Vite 构建工具高频面试题

初级

Webpack 的核心概念有哪些？（entry、output、loader、plugin、mode）
Webpack 和 Vite 最大的区别是什么？各自的优缺点是什么？
什么是 Loader？什么是 Plugin？Loader 和 Plugin 有什么区别？
Webpack 的构建流程是什么？大致分为哪几个阶段？
什么是 Tree Shaking？Webpack 中 Tree Shaking 是如何工作的？有哪些条件？
什么是 Code Splitting（代码分割）？Webpack 中有哪几种实现方式？
Webpack 的 mode 有哪些选项？development 和 production 模式有什么区别？
什么是 HMR（热模块替换）？Vite 的 HMR 和 Webpack 的 HMR 有什么区别？
Vite 为什么启动这么快？它和 Webpack 的开发服务器工作原理有什么不同？
什么是 chunk？Webpack 打包后产生的 main.js、vendors.js、index.js 分别代表什么？

中级

Webpack 的 Loader 执行顺序是什么？为什么 loader 从右到左执行？如何改变执行顺序？
如何配置 Webpack 的 resolve.alias 和 resolve.extensions？有什么需要注意的点？
什么是 externals？如何用它排除第三方库不被打包？
Webpack 的缓存机制是怎样的？（cache: { type: 'filesystem' } 的工作原理）
如何优化 Webpack 的构建速度？（thread-loader、cache、减少 resolve、happyPack 等）
Vite 在生产环境使用 Rollup 打包，Rollup 和 Webpack 在打包策略上有什么区别？
什么是动态 import（import()）？它和静态 import 有什么区别？如何用它做路由懒加载？
Webpack 的 hash 有哪几种？（hash、chunkhash、contenthash）各自用在什么场景？
如何解决 Webpack 打包后 CSS/JS 文件名携带 hash 导致线上缓存失效的问题？
什么是 Babel？Webpack 中 babel-loader 的配置项有哪些？（presets、plugins、@babel/preset-env 的 targets）