结合 Vite 和 Webpack 说一说打包工具都做了什么
1) 入口与模块图：把项目“地图”画出来 功能： 告诉工具“从哪儿开始找代码”，再顺着每个文件里的 import/require() 把所有会用到的文件串成一张网（依赖图）。 直觉类比： 从首页（入口）出发，顺着“超链接”（import）把整站爬一遍，得到网站地图。 Vite： Dev：浏览器请求哪个模块，就现查现用地把它和它的依赖挂到图上。 Build：交给 Rollup 从入口把整张图一次走完。 Webpack： 不分 Dev/Prod，都是先把整张图建好再工作。 常用配置： Vite：resolve.alias、build.rollupOptions.input Webpack：entry、resolve.alias、resolve.extensions、resolve.mainFields 2) 模块解析与格式兼容：不同“口味”的文件都能吃 功能： 让 ESM、CommonJS、CSS、图片、JSON… 这些不同格式都能作为“模块”被导入。 直觉类比： 餐厅后厨收菜，有中餐配料、西餐配料、饮料、甜点——都要能接收并分门别类。 Vite： Dev 期用原生 ESM；遇到 CJS 用 esbuild 转成 ESM；CSS/图片会被转成“虚拟模块”。 Webpack： 用 loader 把各种格式变成 JS 能理解的模块；静态资源用 asset/* 类型统一管理。 配置抓手： Vite：多数开箱即用；特殊包用 optimizeDeps.include/exclude。 Webpack：module.rules（css-loader/file-loader 等已被 asset 取代）、type:'asset/resource|inline|source'。 3) 源码转换（TS/JSX/ESNext）：把“新语法”变成“大家都懂的” 功能： 把 TS、JSX、以及浏览器还不完全支持的新 JS 语法，变成兼容目标环境的普通 JS。 直觉类比： 把方言翻译成普通话；再按不同城市口音做点适配。 Vite： Dev 用 esbuild 快速转；Build 用 Rollup 插件链 + esbuild；必要时再上 Babel。 Webpack： 常用 swc-loader / esbuild-loader（快）或 ts-loader + babel-loader（灵活）。 配置抓手： ...