Parcel零配置构建教程详解

Parcel 是一款真正开箱即用的前端构建工具，尤其擅长零配置打包 HTML：只需一个含 script 或 link 标签的 index.html 文件，它便能自动解析相对路径依赖，一键打包并转译 JS、CSS、图片、TypeScript 和 JSX 等资源——无需配置文件、无需声明入口、不碰复杂配置；但这也意味着它极度依赖路径准确性与静态可分析性，不支持绝对路径、动态 import 和未显式引用的“public”资源，常见问题多源于路径错误、空格干扰或对 HMR 机制的误解；掌握其“所写即所得”的路径哲学和 HTML 驱动的构建逻辑，就能高效避开陷阱，享受极速、简洁的现代前端开发体验。

Parcel 能直接打包 HTML 吗？能，而且默认就支持

Parcel 的设计哲学是“开箱即用”，index.html 就是它的入口点——不需要写配置、不用声明 entry、不碰 webpack.config.js 那套。你只要有一个含 或 的 HTML 文件，Parcel 就能自动分析依赖、打包 JS/CSS/图片，甚至转译 TypeScript 和 JSX。

常见错误现象：Cannot resolve dependency './app.js' —— 其实不是 Parcel 问题，而是路径写错了，比如 app.js 不在 index.html 同级目录；或者用了相对路径但没注意当前工作目录（parcel index.html 必须在 HTML 所在目录下运行）。

• 入口必须是 HTML 文件，命令就是 parcel index.html（不是 parcel serve 或其他）
• 所有资源引用必须是相对路径（./ 或 ../），不能用绝对路径如 /js/app.js
• 如果 HTML 里有 ✅ 被识别并打包
• ❌ 动态 import 不被 HTML 扫描捕获，得写在 JS 里
• ✅ 支持，且自动加 hash
• ✅ 图片会被复制、重命名、路径自动修正
• ⚠️ 若 favicon.ico 在根目录但不在项目目录下，会报错——必须放在源码目录里

开发时热更新为什么没反应？几个关键检查点

Parcel 的 HMR（热模块替换）对 HTML 本身不生效——改 index.html 会触发整个页面刷新，不是局部更新。但 JS/CSS 修改是真正热替换的，前提是引用方式正确。

性能影响：如果 HTML 里写了大量内联