前端面试-工程化（webpack、vite）
Webpack 相关问题（25道）
- Webpack 的核心概念有哪些？（Entry、Output、Loader、Plugin、Module、Bundle）
- 如何配置 Webpack 的多入口和多出口？
- Webpack 的 Tree Shaking 实现原理是什么？
- Loader 和 Plugin 的区别是什么？请举例说明。
- Webpack 的热更新（HMR）是如何工作的？
- 如何优化 Webpack 的构建速度？
- Webpack 的代码分割（Code Splitting）有哪些方法？
- Webpack 的
splitChunks 配置项的作用是什么？
- 如何通过 Webpack 实现按需加载（懒加载）？
- Webpack 的持久化缓存是如何配置的？
- Source Map 在 Webpack 中的配置方式及不同模式的区别？
- Webpack 如何处理 CSS 和静态资源？
- 如何编写一个自定义的 Webpack Loader？
- 如何编写一个自定义的 Webpack Plugin？
- Webpack 的
externals 配置有什么作用？
- Webpack 5 的 Module Federation 是什么？解决了什么问题？
- Webpack 的
devtool 配置对构建性能有何影响？
- 如何通过 Webpack 实现环境变量注入？
- Webpack 的
watch 模式和 webpack-dev-server 的区别？
- Webpack 如何支持 TypeScript？
- Webpack 的
resolve 配置项有哪些常见用法？
- Webpack 如何处理第三方库的兼容性问题（如 polyfill）？
- 如何用 Webpack 实现多页面应用（MPA）？
- Webpack 的
stats 字段和性能分析工具如何使用？
- Webpack 6 相比 Webpack 5 有哪些重大更新？
Vite 相关问题（15道）
- Vite 的核心设计理念是什么？相比传统打包工具有何优势？
- Vite 如何利用原生 ESM 实现快速冷启动？
- Vite 的预构建（Pre-Bundling）解决了什么问题？
- Vite 的热更新（HMR）为什么比 Webpack 更快？
- Vite 如何处理 TypeScript 文件？
- Vite 的配置文件（
vite.config.js）常用配置项有哪些？
- Vite 如何支持 CSS Modules 和 CSS 预处理器？
- Vite 的插件机制是如何工作的？如何开发一个 Vite 插件？
- Vite 如何实现生产环境构建？底层使用什么工具？
- Vite 的依赖解析策略与 Webpack 有何不同？
- Vite 如何优化静态资源（如图片、字体）的加载？
- Vite 如何支持 SSR（服务端渲染）？
- Vite 的
import.meta.glob API 有什么作用？
- Vite 在 Monorepo 项目中的最佳实践是什么？
- Vite 3.x/4.x 版本有哪些重大改进？
Webpack 与 Vite 对比及综合问题（10道）
- Webpack 和 Vite 在构建流程上的主要区别是什么？
- 什么场景下更适合选择 Webpack？什么场景下更适合 Vite？
- Webpack 的 Bundle 模式和 Vite 的 ESM 模式对浏览器兼容性的影响？
- 两者在插件生态上的差异及迁移成本如何？
- Webpack 的持久化缓存与 Vite 的缓存机制有何异同？
- 如何将现有 Webpack 项目迁移到 Vite？可能遇到哪些问题？
- Webpack 的 Module Federation 和 Vite 的动态导入有何关联？
- 两者对现代前端框架（React、Vue、Svelte）的支持有何差异？
- Webpack 和 Vite 在微前端架构中的应用场景比较？
- 未来 Webpack 和 Vite 的发展趋势会如何演变？