我应该“要求”一张静态图片吗答案

【问题标题】：Should I "require" a static image我应该“要求”一张静态图片吗
【发布时间】：2016-09-22 18:10:16
【问题描述】：

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

我可以为静态文件创建一个目录，然后使用 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 方法会内联图像）？还是只是个人喜好？

【问题讨论】：

不要使用 copy-webpack-plugin。 Webpack 旨在为您提供对静态资产依赖项（如图像）的实际管理。它在您的源代码中使用require() 来实现这一点。延伸阅读：blog.andrewray.me/webpack-when-to-use-and-why

【解决方案1】：

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

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

您需要同时使用这两种方法，但copy-webpack-plugin 有特定用途。

【讨论】：