前端的坑【03】解决一个snowpack环境下图片等资源无法加载的问题

复现

最近尝试新的构建工具时遇到了这么一个坑，使用snowpack时图片等资源无法正常加载。

项目结构如下

front
|
|-public
       |-img
           |-logo.png
           |-border.png

然后像往常一样在tsx中引入图片

import logo from '/public/img/logo.png'

然后居然报错了

[22:05:35] [snowpack] [404] Not Found (/public/img/logo.png.proxy.js)

原因

这个问题本质上涉及到bundless和传统bundle工具的差异，在使用webpack dev模式时，webpack会将所有的文件构建成一个or多个bundle，然后存在dev服务器上。而对于snowpack这样的bundless工具，在开发模式下并不需要构建bundle，而是直接请求每一份单独的文件(借助于http2更加高效),snowpack加载文件的过程如下。

这样就涉及到如何定位每一份文件的位置，snowpack的config文件提供了url与文件路径映射的功能

mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
},

因此引入img的代码如下

import logo from '/img/logo.png'