Parcel Serve返回404：index.html被加哈希致无法访问

问题根源 #

Parcel开发模式默认会给入口HTML文件添加哈希值做缓存控制，但这会导致直接访问根路径或无哈希的index.html时返回404，只能访问带哈希的文件。

可行解决办法 #

1. 配置文件+命令参数双管齐下 #

在项目根目录新建或修改.parcelrc，写入以下配置：

{
  "optimizers": {
    "html": ["@parcel/optimizer-htmlnano", {
      "preset": {
        "minifySvg": false
      }
    }],
    "*.html": ["@parcel/optimizer-html"]
  },
  "transformers": {
    "*.html": ["@parcel/transformer-html"]
  },
  "packagers": {
    "*.html": "@parcel/packager-html"
  }
}

接着在package.json的scripts里更新命令，加上--no-content-hash参数：

{
  "scripts": {
    "dev": "parcel serve src/index.html --no-content-hash",
    "build": "parcel build src/index.html --no-content-hash"
  }
}

2. 升级Parcel到最新稳定版 #

部分旧版Parcel存在--no-content-hash参数不生效的bug，执行下面的命令升级：

npm install parcel@latest -D

3. 临时应急方案（不推荐长期用） #

如果只是临时验证，可以直接复制带哈希的HTML文件名访问，或者在浏览器里手动调整地址，但这只是权宜之计，还是建议用前两种方法彻底解决。

验证步骤 #

运行npm run dev后，去dist目录看index.html是否不带哈希，再访问http://localhost:1234/或者http://localhost:1234/index.html，能正常打开页面就说明搞定了。

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