配置parcel-plugin-custom-dist-structure的package.json解决图片路径异常

配置基本规则 #

该插件无需创建独立配置文件，所有归集规则直接写入项目根目录的package.json即可，安装完成后会随Parcel打包流程自动触发规则执行。

具体添加配置的操作 #

1. 打开项目根目录下的package.json文件，在现有最外层JSON字段的末尾（文件最外侧闭合大括号之前）插入插件专属配置字段，注意和上一个相邻字段之间用英文逗号分隔，避免出现JSON语法解析错误。
2. 插件核心配置包含两个必填子模块：
   • groups：定义dist目录下需要生成的归集文件夹，每个键就是最终的文件夹名称；对应的值为数组，可填入需要精准匹配的固定文件名，仅靠后缀全局匹配资源时数组留空即可
   • extensions：定义需要被归集的文件后缀名，每个键为带.开头的文件后缀，值为groups中定义好的目标文件夹名称

匹配需求的示例配置 #

针对“将所有图片资源统一移入dist下的img文件夹、不再和index.html同级输出到dist根目录”的目标，完整的配置片段如下（嵌入到package.json中即可正常生效）：

{
  // 原有项目配置（name、version、scripts、dependencies等全部保留不动）
  "scripts": {
    "build": "parcel build src/index.html"
  },
  "dependencies": {
    // 原有依赖配置保持不变
  },
  // 以下为新增的插件专属配置
  "customDistStructure": {
    "groups": {
      "img": [], // 全局匹配图片资源，不需要精准匹配特定文件
      "js": [],  // 可按需扩展，将JS文件归集到dist/js目录
      "css": []  // 可按需扩展，将CSS文件归集到dist/css目录
    },
    "extensions": {
      // 图片类资源全部映射到img目录
      ".png": "img",
      ".jpg": "img",
      ".jpeg": "img",
      ".gif": "img",
      ".svg": "img",
      ".webp": "img",
      // JS、CSS资源按需映射到对应目录
      ".js": "js",
      ".css": "css"
    }
  }
}

生效与注意事项 #

• 配置完成后正常执行Parcel的打包命令即可，插件会自动将匹配到后缀的文件从dist根目录移动到对应配置的文件夹，同时自动修正HTML、CSS文件内的资源引用路径，不需要手动修改业务代码中的资源引入地址
• 不要将.html后缀加入extensions的映射规则中，否则会把入口文件index.html移出根目录，导致打包后的页面无法正常访问

内容的提问来源于stack exchange，提问作者Balauru Razvan Andrei