前端构建工具有哪些？Webpack、Vite、Rollup 实用对比

你是不是也遇到过这样的情况：写完一堆 HTML、CSS 和 JavaScript，一刷新页面发现样式错乱、JS 报错、图片路径全挂了？或者团队协作时，有人本地跑得好好的，一上线就白屏？这时候，光靠手动改文件、复制粘贴可扛不住——得靠前端构建工具来“打包”“压缩”“转译”“热更新”。

什么是前端构建工具？

简单说，它就是前端开发的“自动化流水线”。比如你用 ES6 写了箭头函数、用 import 引入模块、写了 .scss 样式，但老浏览器不认这些新语法，也不懂怎么处理 .scss 文件。构建工具就负责把这些“人写的代码”，变成“浏览器能跑的代码”。

最常用的三个：Webpack、Vite、Rollup

Webpack 是老牌主力，像一位经验丰富的老师傅，功能全、插件多、配置灵活。适合中大型项目，比如公司后台系统、电商前台。但它启动慢、配置复杂，新手容易被 webpack.config.js 里几十行 loader 和 plugin 绕晕。

一个典型 Webpack 配置片段：

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }
    ]
  }
};

Vite 是近几年蹿红的新锐，主打“快”。冷启动秒开、热更新几乎无感，开发体验像在写原生 HTML/CSS/JS 一样顺滑。它利用现代浏览器原生支持 ES 模块的特性，开发时按需编译，不打包；生产环境再用 Rollup 打包。个人博客、小工具、快速原型，选它准没错。

新建一个 Vite 项目只要两行命令：

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app && npm install && npm run dev

Rollup 更专注“库”的构建，比如你写了个 npm 包，想导出 esm、cjs、umd 多种格式，还希望 Tree Shaking（自动剔除没用的代码），Rollup 就是行家。它配置比 Webpack 简洁，但对应用级项目支持不如 Webpack 全面。

怎么选？看场景

刚学前端，做个个人作品集？直接上 Vite，5 分钟搞定开发环境，不用纠结配置。
公司接手一个用了 3 年的老后台系统，满屏 require、jQuery 插件、IE 兼容要求？Webpack 还是更稳妥。
打算开源一个轻量工具函数库，比如 date-format-lite？Rollup + TypeScript 配合，打包出来只有 2KB。

工具没有高低，只有合不合适。就像修电脑：拧螺丝用十字起子，拆主板得换防静电镊子——手边有趁手的家伙，活儿才干得利索。