Webpack vs Vite：前端构建工具对比与迁移指南
Webpack 和 Vite 是最流行的前端构建工具。本文对比两者的特点。
核心差异
| 特性 | Webpack | Vite |
|---|---|---|
| 开发服务器 | Bundle-based | ESM-based |
| 冷启动 | 慢 | 极快 |
| 热更新 | 中等 | 极快 |
| 生产打包 | 自带 | 使用 Rollup |
| 配置复杂度 | 高 | 低 |
Vite 的优势
1. 极快的冷启动
Vite 使用 ES Module，不需要打包：
// 浏览器直接加载
import { createApp } from 'vue'
2. 极快的热更新
Webpack: 修改文件 → 重新打包 → 更新（2-10秒）
Vite: 修改文件 → 只更新修改的模块（<100ms）
3. 开箱即用
npm create vite@latest my-app -- --template vue
Webpack 的优势
1. 生态成熟
- 丰富的 Loader 和 Plugin
- 社区支持完善
- 企业级方案成熟
2. 灵活配置
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
}
迁移指南
1. 安装 Vite
npm install vite @vitejs/plugin-vue
2. 创建 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000
}
})
3. 修改 index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
4. 修改 package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
选择建议
选择 Vite
- 新项目
- Vue/React 项目
- 追求开发体验
- 中小型项目
选择 Webpack
- 已有 Webpack 项目
- 需要复杂配置
- 大型企业项目
- 特殊需求（微前端等）
总结
Vite 是前端构建工具的未来。新项目推荐使用 Vite，已有 Webpack 项目可以逐步迁移。