Reactjs 在网页包中包含JSX中引用的图像资产

是否可以让Webpack在生成捆绑包中包含图像资产，而无需：

使用该特定资源的导入语句（可通过Webpack 5中的资产模块完成）

不将其作为src属性写入静态HTML文档（可以使用HtmlWebpackPlugin完成）

我将有一些引用图像资源的React JSX代码，或者作为

元素中的

src

属性，或者有一些资源字符串，比如

var imgUrl='./Assets/img.svg'

，还有一些元素稍后将此字符串用作属性

---

目前，我可以手动将整个

/Assets

文件夹复制到

/dist

中，但我在

/Assets

中会有未使用的资源，并希望Webpack找出实际使用的资源。

我不知道我是否理解正确，但您可能需要像这样内联资产

<img src={require('./Assets/img.svg')} />

---

如果这不是你想要的，也许你可以给我解释得更详细一些。。。我有很多玩webpack的经验，我想我可能有一个解决方案给你

哦，现在我明白了，不幸的是，这是不可能的。 <代码> Retry不会检测图像的<代码> SRC<代码>的值，因为它会认为它只是一个<代码>字符串，而不是一个路径。它不会知道你在说哪个文件。要想按您想要的方式使用它，唯一的方法是将这些图像放在

public

文件夹中，您说过您不想这样做

---

在我个人看来，如果应用程序很小，我通常会将静态图像放在一个文件中，方法是导入它们，然后导出一个包含所有图像的对象。最后，每次我想使用任何图像时，我只需导入该文件并使用我想要的任何图像。使用这种方法，在一天结束时，我将只得到一个文件（bundle）。这只是一种方法，有许多不同的方法可以做到这一点，但这是相对于案例而言的

嗨，不，不是那样的。我希望能够保持代码与

的原样。您的解决方案将更符合我的第1点。谢谢，我认为Webpack/任何插件解析所有字符串和识别图像文件扩展名都可能是一个挑战。我的情况是我下载了一个图标包，但我没有使用所有的图标，所以不想捆绑未使用的资源。看来我只需要注册一下我要在什么地方用的。谢谢你的提示！