现代前端项目依赖大量模块、需要编译转换（TS、JSX、SCSS）、压缩优化。构建工具负责处理这一切。
一、为什么需要构建工具
- 模块打包：把多个 JS/CSS 合并
- 编译转换：TS → JS、SCSS → CSS、JSX → JS
- 资源处理：图片、字体等
- 代码优化：压缩、Tree Shaking、懒加载
- 开发体验：热更新（HMR）
二、Webpack：老牌王者
Webpack 是最成熟的构建工具，核心概念：
- Entry：入口文件
- Output：输出
- Loader：处理非 JS 文件（如 babel-loader）
- Plugin：扩展功能（如压缩、HTML 生成）
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: { filename: 'bundle.js' },
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
};三、Vite：新一代黑马
Vite 利用浏览器原生 ES 模块，开发时按需编译，启动极快。
- 开发时：不打包，浏览器请求哪个模块就编译哪个
- 生产时：用 Rollup 打包
- 启动速度：秒级（Webpack 项目大时可能几分钟）
四、对比
维度 Webpack Vite
开发启动 慢（全量打包） 极快（按需编译）
热更新 较快 极快
配置复杂度 高 低
生态成熟度 极高 高（追赶中）
生产打包 自有 Rollup新项目首选 Vite：开发体验碾压。但大型老项目迁移成本高，Webpack 生态更全（特殊 loader/plugin），按需选择。
五、选择建议
- 新项目（Vue/React）→ Vite
- 大型遗留项目 → 继续用 Webpack
- 库开发 → Rollup 或 Vite 库模式
- 简单静态页 → 甚至不需要构建工具
六、小结
构建工具是现代前端的基建。Vite 代表了"开发体验优先"的新趋势，但 Webpack 仍是工业级标配。理解构建原理，比纠结用哪个更重要。