webpack4 初体验-资源管理-加载图片

继续上一篇博文[webpack4 初体验 - 资源管理 - 加载CSS]

如果现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：

现在，当你 import DemoImage from './demo-image.png'，该图像将被处理并添加到 output 目录，并且DemoImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，如上篇文章所示，你的 CSS 中的 url('./demo-image.png') 会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 './demo-image.png' 路径，替换为输出目录中图像的最终路径。html-loader 以相同的方式处理 。

我们向项目添加一个图像，然后看它是如何工作的，你可以使用任何你喜欢的图像：

项目目录结构

src/index.js

重新构建，并再次打开 index.html 文件

如果一切顺利，和 Hello webpack 文本旁边的 img 元素一样，现在看到的图标是重复的背景图片。如果你检查此元素，你将看到实际的文件名已更改为像 84cfb15e659da6455e7ad3a9d702b9c6.png 一样。这意味着 webpack 在 src 文件夹中找到我们的文件，并成功处理过它！

下一步是，压缩和优化你的图像。可以通过 image-webpack-loader 和 url-loader 实现，具体的下次在继续。

项目地址:

https://github.com/durban89/webpack4-demo.git