如何用 parcel-builder 将图像放入子文件夹

如果你正在使用 Parcel 来打包你的前端代码，那么你可能会遇到一个问题：如何将图像放入子文件夹中？

问题的解决方法其实非常简单，只需要在你的 HTML 文件中，引用这些图像时，将路径指定到相应的子文件夹即可。

比如，你有一个 images 文件夹，里面包含了很多图片。现在，你想要将其中一张图片放到一个名为 avatars 的子文件夹下，该怎么做呢？

假设你的 HTML 文件中有这样一段代码：

<img src="./images/avatar.jpg" alt="Avatar">

现在，你只需要修改其中的路径即可：

<img src="./images/avatars/avatar.jpg" alt="Avatar">

这样，你的图片就会被正确地放入 avatars 子文件夹中了。

但是，如果你有很多张图片需要处理，单独一个个修改路径显然不现实。这时，你可以使用 Parcel 的 Copy 插件来自动完成这个过程。

你需要在你的项目根目录下新建一个 .parcelrc 文件，并在其中设置 Copy 插件的配置项。假设你的文件夹结构如下：

- src
  - index.html
  - images
    - avatar.jpg
    - logo.png

你希望将 avatar.jpg 和 logo.png 放入一个名为 assets 的子文件夹下。那么，你的 .parcelrc 文件应该长这样：

{
  "extends": "@parcel/config-default",
  "transforms": {
    "copy": [
      {
        "glob": "./src/images/*",
        "rename": "assets/[name][ext]"
      }
    ]
  }
}

这里，我们使用了 glob 属性来匹配 images 文件夹下的所有文件，然后使用 rename 属性将它们重命名并放入 assets 子文件夹下。其中，[name] 表示文件名，[ext] 表示扩展名。

现在，你只需要重新运行你的开发服务器或者重新打包你的代码，images 文件夹下的所有文件都会被自动复制到 assets 子文件夹下了。

总结

使用 Parcel 打包代码非常方便，而将图像放入子文件夹中也非常简单。你只需要在 HTML 文件中指定正确的路径，或者使用 Copy 插件来自动复制文件即可。希望这篇文章能对你有所帮助！