我正在开始配置 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 方法会内联图像)?还是只是个人喜好?
最佳答案
您应该尝试通过 require
语句引用所有资源。这将使您与 Webpack 的模块加载联系起来,并且您将能够配置 Assets 在最终通过模块加载器作为 JS 模块公开之前的转换方式。例如,您可能希望使用原始图像进行开发,但要针对 I/O 对其进行优化并为不同媒体创建集。
copy-webpack-plugin
允许您直接将上下文中的文件添加到构建输出,而无需将它们视为依赖关系图中的模块。这对于服务器可以直接提供的文档有有效的用途,例如robots.txt、各种设备的证明、由其他进程生成的本地内容等。
您需要同时使用两者,但 copy-webpack-plugin
有特定的用途。
关于javascript - 我应该 "require"静态图像吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39646055/