如何阻止Parcel打包工具移动并重命名图片文件？

问题场景 #

使用WebGL渲染纹理，项目采用CJS模块（因依赖npm库），通过Parcel构建。原文件结构如下：

index.html
index.cjs
src/
  | renderer.cjs
  | resources/
  |   | image.png

Parcel打包后，图片会被移至项目根目录并添加哈希重命名，生成结构如下：

index.html
index.cjs
renderer.cjs
image.86ccfd9d.png

导致代码中硬编码的./resources/image.png路径无法找到图片，纹理加载失败。

解决方案 #

1. 通过模块引入获取正确路径（推荐） #

不要直接使用字符串硬编码图片路径，而是在CJS模块中用require引入图片，Parcel会自动返回打包后的正确路径：

// src/renderer.cjs
const imageUrl = require('./resources/image.png');

const img = new Image();
img.src = imageUrl;
img.onload = () => {
  // 执行WebGL纹理创建、绑定等操作
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  // ...后续纹理配置逻辑
};

这种方式完全适配Parcel的资源哈希和路径调整，是最可靠的解决方法。

2. 配置Parcel保留资源目录结构（可选） #

若希望图片仍保留在resources目录下，可在项目根目录创建.parcelrc文件，自定义资源处理规则：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "src/resources/*.png": ["@parcel/transformer-image"]
  }
}

打包后图片会被输出到resources/image.86ccfd9d.png，此时代码中仍需通过require引入路径，而非硬编码。

3. 统一设置相对公共路径 #

如果项目需要部署到子目录，避免绝对路径问题，可在package.json的脚本中添加--public-url参数：

{
  "scripts": {
    "dev": "parcel index.html --public-url ./",
    "build": "parcel build index.html --public-url ./"
  }
}

确保所有资源路径都以相对路径生成，适配不同部署环境。

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