如何配置Parcel使dist目录与src结构一致并修正资源路径？

核心解决方案（适配Parcel 2.x） #

针对你的需求，通过Parcel命令参数配置+静态资源复制插件可以实现目标目录结构，步骤如下：

1. 升级Parcel到2.x（若使用1.x版本）
   Parcel 1已停止维护，2.x提供更灵活的路径控制能力：

npm install parcel@latest --save-dev

2. 安装静态资源复制插件
   使用parcel-reporter-static-files-copy替代旧版插件，它能复制未被代码引用的静态资源（如字体、未被SCSS/JS调用的图片）：

npm install parcel-reporter-static-files-copy --save-dev

3. 配置package.json
   在package.json中添加编译命令和静态资源复制规则：

{
  "scripts": {
    "build": "parcel build src/index.html --dist-dir dist --public-url ./ --asset-names '[dir]/[name].[hash]' --entry-names '[dir]/[name]'"
  },
  "staticFiles": {
    "staticPath": ["src/fonts", "src/images"],
    "distPath": "dist"
  }
}

参数说明：

• --public-url ./：强制所有资源使用相对路径，适配PHP环境的目录结构
• --asset-names '[dir]/[name].[hash]'：让图片、字体等资源保持原目录结构输出（如src/images/logo.png→dist/images/logo.[hash].png）
• --entry-names '[dir]/[name]'：让JS、HTML入口文件保持原目录结构

4. 调整HTML中SCSS的引用路径
   将index.html中SCSS的引用指向目标CSS目录，Parcel会自动编译并替换路径：

<!-- 原引用 -->
<link rel="stylesheet" href="./scss/style.scss">
<!-- 修改后 -->
<link rel="stylesheet" href="./css/style.css">

5. 执行编译
   运行命令完成打包：

npm run build

最终目录结构 #

编译后dist目录将与src结构一致，仅新增css目录存放编译后的样式文件：

dist/
├── css/
│   └── style.[hash].css
├── fonts/
│   └── （src/fonts下所有文件）
├── js/
│   └── main.[hash].js
├── images/
│   └── （src/images下所有文件）
└── index.html

额外提示 #

• 若不需要文件名哈希（用于缓存），可将--asset-names和--entry-names中的.[hash]移除
• 若JS文件是通过HTML引入的，Parcel会自动编译并修改HTML中的引用路径，无需额外配置

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