Parcel构建后图片未全部进入dist文件夹问题求助

Parcel靠静态分析代码识别依赖，你JS里用/img/dice-${currDice}.png这种动态拼接的路径，它没法提前预判所有可能用到的图片，所以只打包了HTML里明确写的dice-1.png。给你几个可行的解决办法：

• 手动导入所有图片
  在JS文件里先把6张骰子图片都导入，再用对象存起来，动态切换时直接用对象里的路径：

  // 逐一导入图片
  import dice1 from './img/dice-1.png';
  import dice2 from './img/dice-2.png';
  import dice3 from './img/dice-3.png';
  import dice4 from './img/dice-4.png';
  import dice5 from './img/dice-5.png';
  import dice6 from './img/dice-6.png';
  
  // 用对象映射数字和对应的图片路径
  const diceMap = {
    1: dice1,
    2: dice2,
    3: dice3,
    4: dice4,
    5: dice5,
    6: dice6
  };
  
  // 动态切换图片时调用
  yourImgElement.src = diceMap[currDice];
  

  这样Parcel能识别到所有图片依赖，打包时会把它们都放进dist，还会自动处理哈希命名。

• 用Parcel 2的glob批量导入
  如果你用的是Parcel 2，可以用glob语法一次性导入所有符合规则的图片，代码更简洁：

  // 批量导入所有dice开头的图片
  import * as diceImages from './img/dice-*.png';
  
  // 切换时拼接文件名作为key取路径
  yourImgElement.src = diceImages[`dice-${currDice}.png`];
  

  Parcel会自动匹配所有dice-*.png的文件，打包时全放进dist。

• 强制复制整个img目录（不推荐）
  要是不想改代码，可以在package.json里加配置，让Parcel把整个img目录复制到dist：

  "parcel": {
    "assets": ["img/**/*"]
  }
  

  但这种方式图片不会加哈希，容易有缓存问题，优先用前两种方法。

改完之后重新跑npm run start，去dist里看看，6张图片应该都在，动态切换也能正常显示了。

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