javascript - 我应该 "require"静态图像吗

Question

我正在开始配置 webpack，但我不确定处理静态图像的正确方法，并且我已经看到了多种方法。

1. 不需要

我可以为静态文件创建一个目录，然后使用 copy-webpack-plugin 复制静态文件。我的目录结构将如下所示:

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

使用要求

我可以依靠 html-loader 将我的图像 URL 转换为 require 语句，并将我的图像包含在我的代码中。我的目录结构最终将如下:

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

有正确的方法吗？两者之间是否有优缺点(从功能上来说，它们的行为会有所不同，因为 require 方法会内联图像)？还是只是个人喜好？

Answer 1

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

copy-webpack-plugin 允许您直接将上下文中的文件添加到构建输出，而无需将它们视为依赖关系图中的模块。这对于服务器可以直接提供的文档有有效的用途，例如robots.txt、各种设备的证明、由其他进程生成的本地内容等。

您需要同时使用两者，但 copy-webpack-plugin 有特定的用途。