我是否需要＆＃34;静态图片

Question

我开始配置网络包，我不确定处理静态图片的正确方法，而且我已经看过多种方法。

1. 不要求

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

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

1. 使用require

我可以依靠html-loader将我的图片URL转换为require语句，并将我的图片与我的代码一起包含在内。我的目录结构将最终为：

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

有正确的方法吗？有没有专业人士和两者之间的缺点（功能上它们会表现不同，因为需要的方法会内联图像）？或者只是个人偏好？

Answer 1

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

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

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