Webpack 和 Vite 的爱恨情仇：从前端搬砖工到闪电侠的逆袭之路

lx凌星
125 阅读4分钟

前言：每个前端都有一段“打包”血泪史

从前，有一个前端小白，他写了一个 Hello World，然后……

  • 😭 用了 Webpack：配了 3 天配置，终于跑起来了！
  • 😱 项目变大后：改一行代码，等 30 秒热更新，顺便泡了杯咖啡。
  • 🚀 遇到 Vite：秒启动，改代码秒生效，从此爱上搬砖！

今天，我们就来聊聊 Webpack 和 Vite 的“爱恨情仇”，保你笑出腹肌，还能学到干货！

一、Webpack：一个负重前行的“搬家工人”

1. 搬家式打包（全量打包）

想象你要搬家，Webpack 的工作流程是：

  1. 拆家式打包：把沙发、电视、牙刷全拆成零件（转译代码）。
  2. 塞进一个箱子：不管用不用，全塞进一个大箱子（bundle.js）。
  3. 搬到新家：扛着 100 斤的箱子爬 10 楼（浏览器加载），累成狗。

经典语录：

“我就改了个字体颜色，怎么又要打包 30 秒？！” —— 某暴躁前端

2. Webpack 的绝活

  • 兼容性拉满：把 ES6 转成 ES5，让 IE 老爷爷也能看懂你的代码。
  • 啥都能处理：CSS、图片、字体……统统塞进箱子，连你家猫都不放过。

缺点总结：

  • 慢：项目越大，打包越慢，堪比等外卖。
  • 复杂：配置文件比你的相亲简历还长。

二、Vite：一个“闪电侠”般的极客少年

1. 按需编译：你的代码你做主

Vite 的哲学：

“别动我的代码！谁用谁编译，不用就躺平。”

开发流程：

  1. 预存家具：把 node_modules 里的依赖包提前打包好（esbuild 闪电处理）。
  2. 即需即送：你要用哪个模块，Vite 当场编译，比外卖小哥还快。
  3. 热更新：改代码？秒生效！比撤回微信消息还快。

经典语录：

“Vite 启动项目的速度，比我打开 VS Code 还快！” —— 某真香前端

2. Vite 的绝活

  • 闪电启动：冷启动按秒计算，等你泡咖啡？不存在的。
  • 浏览器当苦力：直接让浏览器加载 ESM 模块，自己只当个“包工头”。
  • 生产打包：虽然开发不打包，但生产环境偷偷用 Rollup 打包（真香定律）。

缺点总结：

  • 挑浏览器：现代浏览器才能用，IE 老爷爷被无情抛弃。
  • 源码要 ESM：写 require 会报错，比女朋友还难哄。

三、为什么 Vite 开发不打包，生产却要打包？

1. 开发环境：速度就是正义

  • 不打包优势：
    • 浏览器直接加载模块，少搬 100 斤箱子。
    • 改代码只编译单个文件，比换袜子还快。

举个栗子：
你写了一个 Button 组件，Vite 只编译这个按钮，其他代码继续躺平。

2. 生产环境：性能就是金钱

  • 必须打包的原因：
    • 减少 HTTP 请求：100 个模块发 100 个请求？浏览器会哭的！
    • 代码压缩：删注释、删空格、变量改名（比如 userName 变 a），代码瘦身 90%。
    • 兼容旧浏览器：把 ES6 语法转成 ES5，让 IE 老爷爷也能看懂。

举个栗子：
你写了个 import { debounce } from 'lodash'，Vite 会智能打包，只包含 debounce 的代码！

四、Webpack vs Vite：到底选哪个？

1. 选 Webpack 的场景

  • 你爱 IE 老爷爷：项目要兼容 IE11，只能含泪用 Webpack。
  • 你是个配置狂魔：就喜欢写 1000 行的 webpack.config.js（尊重祝福）。

2. 选 Vite 的场景

  • 你是速度党：拒绝等待，人生苦短，我用 Vite。
  • 你写 Vue3/React：官方推荐，开箱即用，爽到飞起。
  • 你讨厌配置：Vite 的配置比你的微信签名还短。

3. 经典对话

小白：Webpack 和 Vite 到底啥区别？
大佬：Webpack 是手动挡拖拉机，Vite 是自动驾驶特斯拉。

五、手把手教你哄好 Vite

1. 常见翻车现场

  • 错误：在源码里写 module.exports（CommonJS）。
  • Vite 的反应：

    “你是不是 Webpack 派来的卧底？我看不懂！”

2. 解决方案

  • 方案一（从良）：改用 ESM 语法（import/export）。
  • 方案二（硬刚）：装个 @rollup/plugin-commonjs 插件，教 Vite 做人。

代码示例：

// vite.config.js
import commonjs from '@rollup/plugin-commonjs';

export default {
  plugins: [commonjs()] // 给 Vite 戴个“翻译器”
};

六、总结：成年人不做选择，但得懂取舍

  • Webpack：稳重可靠，但配置劝退，适合复杂传统项目。
  • Vite：青春活力，快如闪电，适合现代应用开发。

最后忠告：

选工具就像选对象，合适最重要！
用 Vite 享受速度，用 Webpack 照顾兼容，从此前端搬砖，笑傲江湖！ 🚀

本文首发于掘金，转载需授权。祝大家代码无 Bug，需求不改稿！

avatar
文章
阅读
粉丝