webpack
原理
通过模块化的方式将项目中的各种资源（js、css、图片等）进行打包和优化，最终生成可以在浏览器中加载的静态文件。
具体编译过程
webpack从配置的入口文件开始，递归解析所有依赖的模块，形成一个依赖图。每个模块都被视为一个独立的单元，webpack会根据模块之间的依赖关系将其打包成一个或多个bundle，对于一些webpack无法解析的模块，会在ast语法树解析之前，通过相关loader进行转换，如css-loader处理css，file-loader处理图片和字体文件。webpack还支持插件扩展，通过相关插件实现对模块的优化和处理。
vite
原理
由于现代浏览器本身就支持es module，会自动向依赖的module发出请求，vite基于原生es模块，将开发环境的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并，由于vite在启动时不需要打包，也就意味着不需要分析模块的依赖，不需要编译，因此启动速度非常快，当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大地缩减了编译时间，项目越复杂、模块越多、vite的优势越明显。
对比
启动
webpack会先打包，然后启动开发服务器器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块时再对该模块进行实时编译
HRM
Vite 基于esm实现热更新，当文件变动时，vite只需精确使已变更的模块失效，浏览器会重新请求变更的模块，不像webpack那样需要把该模块的相关依赖全部编译一次，效率更高
webpack则是通过自建的hrm 实现热更新，当文件变动时，webpack需要重新构建受影响的模块，生成增量更新，通过websocket推送到服务器，然后由运行时代码完成模块替换
