(Webpack)使用url-loader或文件加载器,我真的必须在我的.js中为我想要包含的每个静态图像包含一个require()吗？

Question

我还在学习webpack,但是在我的生产版本中出现图像时遇到了麻烦,直到我偶然发现了一些require('path/to/image.png')在.js文件顶部的代码.所以我尝试了,并且看到它有效.

这对我来说似乎很不稳定.我是否真的必须为我需要服务的每个静态图像中包含其中一个？有一个更好的方法吗？如果没有,这将是混乱的.

Answer 1

有类似的加载器css-loader,url-loader它们将URL解析为base64内联数据字符串,而不是提供静态资产.

你可以看到这个如何实现的伟大指南url-loader.如果您遇到问题,则需要确保使用正确的相对路径.

'./path/to/image.png'

是的，我也知道，但这并不能真正回答我的问题。我想知道是否有某种方法可以避免在我的 javascript 文件中执行 `require('path/to/image.png')` 的需要。我不知道如何才能更清楚地表明这就是我要问的。 (2认同)
要回答您实际上提出的问题，不，您不能在不以某种方式将图像导入到javascript中的情况下将其包括在内，无论它是使用require（）还是es6导入。 (2认同)
@Anj，不确定webpack 1，但是webpack 2中的url-loader不需要使用`require（）`。它只需使用上面提到的Sean正确的路径语法即可工作。它对我有用，而且我绝对不对图像使用`require（）`。 (2认同)

Answer 2

在构建webpack项目时,可以使用CopyWebpackPlugin将src文件移动到assets文件夹.