webpack面试题及答案

面试官问webpack，试题十有八九先扔出“说说它的及答打包原理”。别急着背答案，试题先想清楚一件事：webpack本质就是及答个模块打包器，它把所有资源——JS、试题CSS、及答图片甚至字体——都视作模块。试题核心流程就三步：从入口文件出发，及答递归解析依赖，试题构建依赖图，及答最后按规则输出成静态文件。试题整个过程围绕两个主角：loader和plugin。及答loader负责转换文件，试题比如把ES6转ES5、及答把SCSS转CSS；plugin负责在打包生命周期里干loader干不了的试题事，比如代码分割、资源优化。

再常见不过的问题是“loader和plugin的区别”。我习惯打个比方：loader是翻译官，只处理文件内容的转换，输入一个文件，输出另一个文件；plugin是项目总监，能监听webpack构建的每个阶段，从开始到结束都能插手。比如`HtmlWebpackPlugin`能自动生成HTML并注入打包后的脚本，这活儿loader根本做不了，因为它需要知道所有打包产物的信息，而loader只盯着单个文件。

“如何提升webpack构建速度”这题，面试官想听实操。别上来就背配置项，先讲思路：构建慢的根因通常是大量文件需要解析和转换。几个立竿见影的手段——用`include`限制loader的扫描范围，只处理`src`目录，node_modules直接忽略；开启`cache-loader`或`babel-loader`的缓存，二次构建能快一半；生产环境用`TerserPlugin`开启多进程并行压缩。还有，`resolve.alias`能减少查找模块的时间，但别滥用，容易藏坑。

有次面试，对方问我“webpack怎么处理循环依赖”。这题挺刁钻，但实际开发真会遇到。webpack能打包循环依赖，但运行时可能出问题——A模块引了B，B又引了A，代码执行顺序不对就报`Cannot access before initialization`。解决办法是重构代码，把公共部分抽出来，或者用动态`import()`延迟加载。面试时补一句“循环依赖往往是设计问题，不是工具问题”，能显得你有架构意识。

说到代码分割，面试官爱问“怎么让首屏加载更快”。`SplitChunksPlugin`是默认答案，但你要说出细节——它会把公共依赖抽成独立chunk，比如把react、react-dom单独打包成vendor文件，利用浏览器缓存长期不变。还有按需加载：路由懒加载用`import()`语法，webpack会自动把每个路由页面拆成独立chunk，只有访问到才下载。我见过不少项目，光靠这招首屏体积直接砍半。

最后聊个冷门但常考的——“webpack和vite比，差在哪”。别踩一捧一，说清楚本质区别：webpack是打包式，所有模块启动前全得打包完，项目一大就慢；vite是浏览器原生ESM，开发时按需编译，秒启动。但vite生产环境还是用rollup打包，因为原生ESM在HTTP/2下虽然快，但请求数太多反而拖慢加载。webpack的优势在于生态成熟、配置灵活，老项目迁移成本低。面试时补一句“选型看团队熟悉度和项目复杂度”，比盲目吹vite靠谱。

写代码这行，面试题从来不考死记硬背。webpack这些概念，你真正用坏过几个项目，踩过几次坑，答出来的深度自然不一样。多折腾，比背一百道题都强。