如何使用ParcelJS(v2)在dist目录构建无哈希命名的输出文件

要实现dist目录下直接生成不带内容哈希的main.css、main.js，用自定义targets配置是最稳定的方案，步骤如下：

• 打开项目根目录的package.json文件，添加targets配置，单独指定每个资源的入口和输出目录：

{
  "targets": {
    "css": {
      "source": "assets/scss/main.scss",
      "distDir": "dist"
    },
    "js": {
      "source": "assets/js/main.js",
      "distDir": "dist"
    }
  }
}

• 构建时不需要在命令里传入口文件，直接执行带无哈希参数的构建命令即可：
  parcel build --no-content-hash

注意：如果之前执行过构建，先删掉根目录下的.parcel-cache缓存文件夹和旧的dist目录再跑命令，Parcel的本地缓存经常会导致新配置不生效。

之前两种尝试失败的原因 #

• 以html文件为入口时，Parcel v2部分版本对--no-content-hash参数的适配存在问题，html内自动引入的关联css、js资源不会遵循该参数规则，默认还是会带上内容哈希。
• 直接在命令行传入scss、js文件路径作为入口时，Parcel默认会保留入口文件相对于项目根的目录结构，因此会把源文件路径里的scss、js文件夹层级原样输出到dist目录下，才会出现dist/scss/main.css这类不符合预期的路径。

如果不想修改package.json，也可以在npm脚本里加文件移动逻辑曲线实现，配置示例：

{
  "scripts": {
    "build": "parcel build --no-content-hash assets/scss/main.scss assets/js/main.js && mv dist/scss/main.css dist/main.css && mv dist/js/main.js dist/main.js && rm -rf dist/scss dist/js"
  }
}

这种方式不需要改Parcel原生配置，但跨系统使用时可能存在命令兼容问题，优先推荐使用官方支持的targets配置方案，没有额外兼容问题。

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