企业官网建设流程全解析

Webpack、Vite、Rollup 核心区别概述

一句话概述

Webpack 是全能型构建工具，Vite 是新时代开发体验的颠覆者，Rollup 是专注高效的库打包专家。

Webpack

核心理念：基于依赖图的静态打包器

• 构建方式：开发/生产环境都需全量打包，bundle 模式
• 关键特性：强大的 loader/plugin 生态、代码分割、热更新（HMR）
• 适用场景：企业级复杂应用，需要处理多种资源、复杂构建流程

Vite

核心理念：基于原生 ESM 的开发服务器+生产打包

• 构建方式：开发环境用原生 ESM 按需加载，生产环境用 Rollup 打包
• 关键特性：闪电般冷启动、模块热更新、开箱即用的前端工具链
• 适用场景：现代前端项目，追求极致开发体验，尤适用于 Vue/React 应用

Rollup

核心理念：面向库打包的 ESM 打包器

• 构建方式：基于 ESM 静态分析进行 tree-shaking
• 关键特性：输出格式灵活（ESM/CJS/UMD）、tree-shaking 效率高、配置简洁
• 适用场景：框架/库开发（Vue/React 本身用它打包）、需要精细控制输出格式

核心差异对比