Javascript “我应该吗？”；要求；静态图像

我刚开始配置webpack，但我不确定处理静态图像的正确方法，我见过多种方法

不需要

我可以为静态文件创建一个目录，然后使用copywebpack插件复制静态文件。我的目录结构如下所示：

src/modules/login/components/loginPage.html
static/images/logo-login.png

使用要求

我可以依靠html加载器将我的图像URL转换为require语句，并将图像与代码一起包含。我的目录结构将结束为：

src/modules/login/components/loginPage.html
src/modules/login/components/logo-login.png

---

有正确的方法吗？这两者之间是否有利弊（功能上，它们的行为会有所不同，因为所需的方法会将图像内联）？还是仅仅是个人偏好？

您应该尝试通过

require

语句引用所有资产。这将把您与Webpack的模块加载联系在一起，您将能够在资产最终通过模块加载器作为JS模块公开之前配置资产的转换方式。例如，您可能希望使用原始图像进行开发，但要针对I/O对其进行优化，并为不同的介质创建集

copy webpack plugin

允许您直接将上下文中的文件添加到生成输出，而无需将其作为依赖关系图中的模块处理。这对于可由服务器直接提供的文档（如

robots.txt

）、各种设备的证明、由某些其他流程生成的本地内容等具有有效的用途

---

您需要同时使用这两种插件，但复制网页包插件有特定的用途。

不要使用复制网页包插件。Webpack旨在为您提供对静态资产依赖项（如图像）的实际管理。它在源代码中使用

require（）。进一步阅读：