在 Webpack 中包含 JSX 中引用的图像资产答案

【问题标题】：Including image assets referenced in JSX in Webpack在 Webpack 中包含 JSX 中引用的图像资产
【发布时间】：2021-05-27 15:21:08
【问题描述】：

是否可以让 Webpack 在构建包中包含图像资产，而无需：

对特定资源使用 import 语句（可以使用 Webpack 5 中的 Asset Modules 完成）
不将其作为 src 属性写入静态 HTML 文档（可以使用 HtmlWebpackPlugin 完成）

我会有一些引用图像资源的 React JSX 代码，或者作为 <img> 元素中的 src 属性，或者有一些资源字符串，比如 var imgUrl = './Assets/img.svg'，以及稍后使用这个字符串作为属性的一些元素.

目前我可以手动将整个 /Assets 文件夹复制到 /dist 中，但我会在 /Assets 中有未使用的资源，并希望 Webpack 找出实际使用的资源。

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

哦，现在我明白了，不幸的是，这是不可能的。 React 不会检测到图像的src 的值，因为它会认为它只是string，而不是路径。它不会弄清楚你在说哪个文件。以您想要的方式使用它的唯一方法是将这些图像放在public 文件夹中，您说过您不想这样做。

在我个人看来，如果应用程序很小，我通常对静态图像执行的操作是将它们全部放在一个文件中，方法是导入它们并导出一个包含所有它们的对象。最后，每次我想使用任何图像时，我只需导入该文件并使用我想要的任何图像。使用这种方法，最终我将只得到一个文件（捆绑包）。这只是一种方法，有很多不同的方法可以做到这一点，但它与案例有关

【讨论】：

谢谢，我认为 Webpack / 任何插件解析所有字符串并识别图像文件扩展名可能是一个延伸。我的情况是我下载了一个图标包，但我没有使用所有图标，所以不想捆绑未使用的资源。看起来我只需要注册我要在某处使用的那些。感谢您的提示！

【解决方案2】：

我不知道我是否理解正确，但也许您可以像这样要求内联资产...

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

如果这不是你要找的，也许你可以更详细地解释一下……我在玩 webpack 方面有相当多的经验，我想我可能会为你提供解决方案

【讨论】：

嗨，不完全一样。我宁愿能够将代码与<img src='./Assets/img.svg' /> 保持原样。您的解决方案将更符合我的观点 1。