继续上一篇博文[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
领取专属 10元无门槛券
私享最新 技术干货