如何使用ParcelJS 2实现打包文件直接输出到根目录，不生成嵌套子文件夹

方法1：直接修改打包命令 #

在原有命令基础上新增--entry-naming参数指定入口文件输出规则，修改后的package.json命令如下：

"dev": "parcel styles/index.scss scripts/index.js --dist-dir assets --entry-naming [name].[ext]"

如果需要给产物添加哈希戳避免缓存问题，可以把规则改为[name].[hash].[ext]。

方法2：通过package.json配置固定规则 #

如果不想把参数都写在命令里，可以在package.json中添加Parcel全局配置：

{
  "name": "你的项目名",
  "source": ["styles/index.scss", "scripts/index.js"],
  "targets": {
    "default": {
      "distDir": "assets",
      "entryNaming": "[name].[ext]"
    }
  },
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  }
}

配置完成后直接执行npm run dev即可生效。

注意：修改配置后建议先删除项目根目录下的.parcel-cache缓存文件夹，再重新运行命令，避免旧缓存导致配置不生效。

原理解释 #

Parcel默认会保留入口文件的相对目录结构作为输出路径，通过显式指定entryNaming规则，会直接使用入口文件名作为输出文件名，忽略原有的父目录层级，最终产物会直接输出到distDir指定的assets根目录下。

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