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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180603G08OPH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券