前端工程化：Webpack 与 Vite 对比

构建工具演进

从 Grunt → Gulp → Webpack → Rollup → Vite，前端构建工具不断进化。

Webpack：模块打包机

核心概念

• Entry：入口文件
• Output：输出配置
• Loader：文件转换器
• Plugin：功能扩展

配置示例

// webpack.config.js
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.png$/,
        type: "asset/resource"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  devServer: {
    port: 3000,
    hot: true
  }
};

Webpack 优缺点

✅ 优点：

• 生态成熟，插件丰富
• 代码分割能力强
• 适合大型项目

❌ 缺点：

• 配置复杂
• 冷启动慢
• HMR 延迟高

Vite：下一代前端工具

核心原理

• 开发环境：原生 ES 模块 + 按需编译
• 生产环境：Rollup 打包

配置示例

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"]
        }
      }
    }
  }
});

Vite 优缺点

✅ 优点：

• 秒级启动
• 即时 HMR
• 配置简单
• 开箱即用

❌ 缺点：

• 生态相对年轻
• 生产构建依赖 Rollup
• 大型项目优化需调优

性能对比

指标	Webpack	Vite
冷启动	30-60s	<1s
HMR	2-5s	<50ms
生产构建	优化好	优化好
配置复杂度	高	低

迁移指南

从 Webpack 到 Vite

// 1. 安装 Vite
npm install -D vite

// 2. 创建 vite.config.js
// 3. 修改 index.html 移到根目录
// 4. 替换 import 路径（移除 .js 扩展名）
// 5. 替换 process.env 为 import.meta.env
// 6. 替换 require() 为 import

选择建议

选择 Webpack 当：

• 大型复杂项目
• 需要精细控制打包
• 依赖特定 Webpack 插件

选择 Vite 当：

• 新项目启动
• 追求开发体验
• Vue/React/Svelte 项目

最佳实践

1. 代码分割 - 按需加载
2. Tree Shaking - 移除无用代码
3. 压缩优化 - Terser、CSSNano
4. 缓存策略 - contenthash
5. CDN 加速 - 静态资源分发

选择合适的工具，让前端开发更高效！