webpack对比vite

在公司真正的商业项目中，当前使用的都是 webpack,而我自己搞 demo 之类的，会更偏向于 vite 这种开箱即用的。那么这两个打包工具，究竟有哪些差异？我们在不同的场景下又应该如何抉择呢？

一句话结论：如果没有企业级高复杂度打包定制需求，请直接选用 vite。

接下来我们再讨论几个细节：

它们的核心实现原理？webpack 是构建时打包（bundle-based），而 vite 是基于原生的 ES 模块。那么最直接的影响就是你发现 npm run dev 之后，webpack 还在那走进度条呢，vite 已经让你去打开网页了。甚至你修改了一丢丢代码，如果工程真的非常大的话，webpack 在控制台还得显示一会compiling，而 vite 又是秒处理。对于开发人员来说，最核心的差异在冷启动和热更新的速度上。当然vite快的代价也是有的，就是在开发的时候，首屏加载慢的要死，因为要动态编译。

曾几何时，有一个岗位叫 webpack 配置工程师，虽有戏谑的成分在里面，但也真实展示了 webpack 配置的复杂性，如果你认真去读 webpack 的文档，咱都不说让你去懂实现原理，去看源码，你只把所有配置项都搞清楚，我觉得你在 webpack 配置领域，应该都是独孤求败了。我有无数次打开 webpack 官网，吭哧吭哧看了几章，觉得好像也没啥了不起的，但只要我不去反复修改相关配置，以及真的去看它的源码设计，那知识就像海鸥，飞过我的脑子，不留下任何痕迹。实际上呢，我们常用的 webpack 配置，其实也没多少项。你最常改动的地方，很可能就是 proxy 的部分了，连不同的后端环境啥的，都靠这个（如果你们没有一个自动 nginx 后端转发服务的话）。还有一个 sourceMap 相关的配置，生产环境不能把源码暴露出来（最近 apple 就把源码直接上生产环境了，所以这地方一定要注意，当然正常生产环境打包肯定是固定流水线处理，靠人工的话，一定会爆炸的，只是早晚的问题），在开发环境，肯定是越详细越好了。此外，你可能关注到 webpack 有一堆 loader 和 plugin。那它们又是干啥的呢🤔？一句话结论：webpack本身只处理js，有了loader就可以处理其他格式的文件（本质上是一个纯函数），而有了plugin就可以处理loader处理不了的东西。比较常用的loader，有处理css的，有处理图片的，处理ts的。而比较常用的plugin就有htmlxxx（把打包好的css js 注入html），cleanyyy（清理打包产物，一般用在打包之前）。我觉得对于日常开发来说，了解到这应该可以了。具体webpack 怎么去配置，建议还是去网上找一个最佳实践，先用起来，再针对自己的项目特点做一些定制改造就可以了。说完了webpack的坑爹，vite就显得小巧可爱了，开箱即用，不用关心那么多东西，又不是不能用！你如果真有一个需求，只能通过webpack的插件实现，而vite没有的话，那建议你直接找到那个插件的源码，让ai翻译一遍就完事了。

为了在打包生成生产环境的包，webpack 这边用的是自身的打包器，经受住了历史的考验。而vite这边则是基于rollup，一般情况下打包体积会小一点。

在底层语言上，webpack是基于nodejs的，所以你可以看到很多webpack的模块，需要你require()进来。而vite则是用了esbuild（用go写的）

在对于文件的处理上，webpack像是把所有东西，都通过loader变成它能处理的模块。而vite这边则通过浏览器原生esm按需加载。

最后总结，人生苦短，我选vite。古董项目，啥也别改。项目和人，有一个能跑就行了。