Tag
构建工具
Parcel 详解：零配置构建工具适合什么场景
前言Parcel 的核心卖点是： 零配置，开箱即用。 相比 Webpack 的高度可配置，Parcel 更强调自动识别项目里需要的能力，让开发者尽快跑起来。 Parcel 怎么使用最简单的项目里，可以直接把 HTML 作为入口。 1234567<!DOCTYPE html><html> <body> <div id=...
esbuild 详解：为什么它这么快
前言esbuild 是一个用 Go 编写的 JavaScript / TypeScript 打包和转换工具。 它最常见的定位是： 极快的底层编译能力。 很多现代工具并不是直接让开发者使用 esbuild，而是把它作为底层能力。 比如 Vite 就使用 esbuild 做依赖预构建和开发阶段的快速 transform。 esbuild 能做什么esb...
Vite 详解：为什么开发启动和 HMR 这么快
前言Vite 最大的变化是： 开发环境不先打包。 这和传统 Webpack 开发模式有本质区别。 Vite 快不是单纯因为 esbuild 快，而是因为它改变了开发阶段的架构。 Webpack 开发模式传统打包工具开发时通常要先做完整构建。 1234567891011读取入口 ↓分析所有依赖 ↓执行编译转换 ↓生成开发环境 bundle ↓启动 dev se...
Rollup 详解：为什么它适合打包库
前言Rollup 的定位非常清晰： 生成更干净、更小、更适合分发的 JavaScript 库代码。 Webpack 更像应用构建工具，想处理整个前端工程。 Rollup 更像 ESM 优化器，重点是把库代码输出得足够优雅。 Rollup 的核心思想Rollup 围绕 ESModule 设计。 ESModule 的 import / export 是...
Webpack 详解：Module、Bundle、Chunk、Loader 和 Plugin
前言Webpack 的核心价值不是“把 JavaScript 打成一个文件”，而是： 把前端项目里的所有资源都纳入模块系统。 JavaScript、CSS、图片、字体、SVG、Sass、TypeScript，都可以通过 import 进入同一套依赖图。 123import "./index.css";import logo from &q...
Webpack、Rollup 和 Vite：前端构建工具的三个时代
前言如果只用一句话理解 Webpack、Rollup 和 Vite： 工具 核心定位 Webpack 万物皆模块 Rollup 极致打包库 Vite 利用浏览器 ESM 的新一代开发工具 它们不是简单的“谁替代谁”，而是分别代表了前端工程化的几个阶段： Webpack 解决的是：前端所有资源如何统一工程化。 Rollup 解决的是：库代码如何输出得更干净、更...
前端工程化到底是什么：从模块化、构建工具到 CI/CD
前言前端工程化本质上是： 让前端项目能被多人、长期、稳定、高效开发。 它解决的不是某一个语法问题，而是一整套工程问题： 代码怎么组织？ 依赖怎么管理？ 项目怎么构建？ 团队怎么协作？ 质量怎么保证？ 代码怎么发布？ 项目变大以后怎么维护？ 所以前端工程化不是“学工具”，而是“解决大型项目协作问题”。 工具只是手段。 前端工程化主要包含什么可以先把它分成 10...
现代前端打包工具全面对比：Webpack、Vite、Rollup、esbuild
📚 前言前端打包工具经历了从 Grunt → Gulp → Webpack → Vite 的演进。如今，开发者面对 Webpack、Vite、Rollup、esbuild、Parcel 等众多选择，该如何抉择？本文将全面对比这些现代打包工具。 本文定位是基础对比和选型入口。每个工具的原理、配置和适用场景，会放到独立专题里展开： Webpack：依赖图、Lo...