如何用Parcel正确打包纯HTML/CSS网站？是否必须生成JS文件？

核心结论 #

那个自动生成的JS文件完全不需要保留——它是Parcel开发模式下HMR（热模块替换）的辅助代码，用于实时刷新页面，生产环境下既无作用还会引发WebSocket连接错误（因为它试图连接本地开发服务器，而生产部署环境没有这个服务）。

正确打包方案 #

1. 清理缓存并调整build命令

先删除Parcel缓存和旧的dist目录，避免残留文件干扰：

rm -rf .parcel-cache dist

然后修改package.json里的build命令，强制禁用HMR相关代码注入：

"scripts": {
  "start": "npx parcel",
  "build": "npx parcel build --no-hmr"
}

执行npm run build后，Parcel就不会生成多余的JS文件，也不会在HTML里插入对应的script标签。

2. 极端情况：手动配置Parcel仅处理静态资源

如果上述方法无效，创建一个.parcelrc配置文件，限定Parcel只处理HTML和CSS/Sass：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.html": ["@parcel/transformer-html"],
    "*.scss": ["@parcel/transformer-sass"]
  }
}

这个配置会让Parcel跳过自动注入无关脚本的逻辑，只打包你实际存在的静态文件。

额外说明 #

如果未来你的项目需要添加JS代码，只要在index.html里正常引入JS文件（比如<script src="./app.js"></script>），Parcel会自动识别并正确打包对应的JS，不会再生成多余的HMR相关文件。

内容的提问来源于stack exchange，提问作者Sam Leurs