前端面试-工程化（webpack、vite）

Webpack 相关问题（25道）

1. Webpack 的核心概念有哪些？（Entry、Output、Loader、Plugin、Module、Bundle）
2. 如何配置 Webpack 的多入口和多出口？
3. Webpack 的 Tree Shaking 实现原理是什么？
4. Loader 和 Plugin 的区别是什么？请举例说明。
5. Webpack 的热更新（HMR）是如何工作的？
6. 如何优化 Webpack 的构建速度？
7. Webpack 的代码分割（Code Splitting）有哪些方法？
8. Webpack 的 splitChunks 配置项的作用是什么？
9. 如何通过 Webpack 实现按需加载（懒加载）？
10. Webpack 的持久化缓存是如何配置的？
11. Source Map 在 Webpack 中的配置方式及不同模式的区别？
12. Webpack 如何处理 CSS 和静态资源？
13. 如何编写一个自定义的 Webpack Loader？
14. 如何编写一个自定义的 Webpack Plugin？
15. Webpack 的 externals 配置有什么作用？
16. Webpack 5 的 Module Federation 是什么？解决了什么问题？
17. Webpack 的 devtool 配置对构建性能有何影响？
18. 如何通过 Webpack 实现环境变量注入？
19. Webpack 的 watch 模式和 webpack-dev-server 的区别？
20. Webpack 如何支持 TypeScript？
21. Webpack 的 resolve 配置项有哪些常见用法？
22. Webpack 如何处理第三方库的兼容性问题（如 polyfill）？
23. 如何用 Webpack 实现多页面应用（MPA）？
24. Webpack 的 stats 字段和性能分析工具如何使用？
25. Webpack 6 相比 Webpack 5 有哪些重大更新？

---

Vite 相关问题（15道）

1. Vite 的核心设计理念是什么？相比传统打包工具有何优势？
2. Vite 如何利用原生 ESM 实现快速冷启动？
3. Vite 的预构建（Pre-Bundling）解决了什么问题？
4. Vite 的热更新（HMR）为什么比 Webpack 更快？
5. Vite 如何处理 TypeScript 文件？
6. Vite 的配置文件（vite.config.js）常用配置项有哪些？
7. Vite 如何支持 CSS Modules 和 CSS 预处理器？
8. Vite 的插件机制是如何工作的？如何开发一个 Vite 插件？
9. Vite 如何实现生产环境构建？底层使用什么工具？
10. Vite 的依赖解析策略与 Webpack 有何不同？
11. Vite 如何优化静态资源（如图片、字体）的加载？
12. Vite 如何支持 SSR（服务端渲染）？
13. Vite 的 import.meta.glob API 有什么作用？
14. Vite 在 Monorepo 项目中的最佳实践是什么？
15. Vite 3.x/4.x 版本有哪些重大改进？

---

Webpack 与 Vite 对比及综合问题（10道）

1. Webpack 和 Vite 在构建流程上的主要区别是什么？
2. 什么场景下更适合选择 Webpack？什么场景下更适合 Vite？
3. Webpack 的 Bundle 模式和 Vite 的 ESM 模式对浏览器兼容性的影响？
4. 两者在插件生态上的差异及迁移成本如何？
5. Webpack 的持久化缓存与 Vite 的缓存机制有何异同？
6. 如何将现有 Webpack 项目迁移到 Vite？可能遇到哪些问题？
7. Webpack 的 Module Federation 和 Vite 的动态导入有何关联？
8. 两者对现代前端框架（React、Vue、Svelte）的支持有何差异？
9. Webpack 和 Vite 在微前端架构中的应用场景比较？
10. 未来 Webpack 和 Vite 的发展趋势会如何演变？