你有没有遇到过这样的情况：改了一行 CSS，刷新页面却没变化；或者写完一堆 JS，发现浏览器里报错说 require is not defined；又或者项目越来越大，本地启动要等半分钟……这些不是代码写错了，很可能是缺了个趁手的前端构建工具。
构建工具，其实就是前端的“打包师傅”
HTML、CSS、JS 这些文件，浏览器当然能直接跑。但现代前端开发早就不只是写几个文件那么简单了：用 TypeScript 写逻辑、用 Sass 写样式、用 Vue 或 React 写组件、还要压缩图片、自动加 CSS 前缀、把 ES6+ 语法转成兼容老浏览器的代码……这些活儿，浏览器可不管。这时候就需要一个“构建工具”来统一处理——它像一个自动化流水线，把源码“加工”成浏览器真正能高效加载和运行的产物。
webpack：老牌主力，功能全但配置略重
webpack 是最早火起来的构建工具之一，江湖人称“配置工程师养成器”。它靠 entry 找入口，用 loader 处理各种文件（比如把 .ts 编译成 .js），再用 plugin 干杂活（比如清理 dist 目录、注入全局变量）。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};优点是生态成熟、插件丰富；缺点是配置稍多，小项目上手有点绕。
Vite：快得像开了挂的新锐选手
如果你试过用 Vite 新建一个 Vue 项目：npm create vite@latest my-vue-app -- --template vue，然后 npm run dev，大概率会愣一下——秒开！连热更新都几乎无感。
它不靠打包启动开发服务器，而是利用现代浏览器原生支持 ES Module 的特性，按需编译、按需加载。开发时基本不打包，生产环境才用 esbuild 或 rollup 打包优化。对新手友好，也特别适合快速验证想法。
Rollup：专注打包库，输出干净利落
如果你写的是一个 npm 包（比如封装了一个日期选择器组件），Rollup 就是更合适的选择。它主打“Tree-shaking”，能自动剔除没用上的代码。比如你只引用了 lodash.get，它就不会把整个 lodash 都塞进去。
// rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.cjs',
format: 'cjs'
}
};它生成的代码更精简，更适合发布到 npm，但对大型应用项目的开发体验不如 webpack 或 Vite 全面。
怎么选？看你的场景
刚学前端，做个个人博客或小工具？直接上 Vite，省心又快。
团队在维护一个中大型 React 应用，需要深度定制构建流程？webpack 依然稳如老狗。
正在写一个供别人引入的 UI 组件库？Rollup 更对口。
工具没有高低，只有合不合适。就像炒菜——家常小炒用铁锅，炖汤用砂锅，熬糖浆用铜锅。知道它们各自擅长什么，比死记硬背配置更重要。