batchplot3.5.9如何使用_细说 webpack系列 9. 使用 webpack 处理图片资源

1348448729e802253a52760d5517c368.png

大家好!我是萝卜,今天和大家说一说 webpack 是如何处理图片资源的,前端项目离不开图片资源,Webpack 中图片资源也是可以作为模块直接使用的,下面我们就来看一看。

图片引入方式

图片是前端项目必不可少的静态资源,在日常开发中,我们可能会在下面三种情况使用图片:

1.HTML 中通过img标签等方式引入;

2.CSS 中通过src等方式引入;

3.JavaScript 中使用图片的 URL 或者内容(比如 Canvas 等);

最笨最直接的方式就是直接写死线上的地址,例如在页面中,我们引入 <img> 如下:

<

上面地址的 http://cdn.example.com 是一个 CDN 静态域名,后面是我们完整的路径,这样我们上线的时候地址就可以直接看了,我们线下开发的时候可以提前将静态资源打包好上传到线上。这样操作想想就很费劲,而且 CDN 每次静态资源更新都要需要刷新缓存,如果我们使用 MD5 命名图片的时候就更麻烦了。

我们在 Webpack 中,则可以使用 loader 的方式完成图片的引入。例如在 CSS 文件中,直接相对路径使用背景图片:

.

在 HTML 中也可以直接使用相对路径:

<

还记得我们之前学过的resolve.alias方式创建一个目录的alias引用,这种方式不仅仅可以在 JavaScript 中使用,在 HTML 和 CSS 中也可以使用的:

// webpack.config.js
<

使用 loader 来加载图片资源

怎么使用图片我们了解了,但是怎么让 Webpack 识别图片,并且能够打包输出呢?这时候就需要借助 loader 了,这里有两个 loader 可以使用:file-loader 和 url-loader 。

file-loader和url-loader是经常在一些 Webpack 配置中看到的两个 loader,并且两个 loader 在一定应用场景上是可以相互替代的,但是对于两者的区别,很少有人能够说得清楚,下面介绍下两者的区别。

  • file-loader:能够根据配置项复制使用到的资源(不局限于图片)到构建之后的文件夹,并且能够更改对应的链接;
  • url-loader:包含 file-loader 的全部功能,并且能够根据配置将符合配置的文件转换成 Base64 方式引入,将小体积的图片 Base64 引入项目可以减少 http 请求,也是一个前端常用的优化方式。

下面以url-loader为例说明下 Webpack 中使用方法。首先是安装对应的 loader:

npm 

下面我们创建一个项目,目录结构如下:

|---- 

首先我们在index.css中引入 small-01.png:

.

然后在index.js中引入了index.css和large.png:

import 

最后我们在index.html中通过 img 引入large.png:

<!DOCTYPE html>

这时候我们修改webpack.config.js:

const 

执行webpack后发现,打包出来的文件都比较大,通过查看内容发现,我们的图片被Base64处理了,然后直接引入了。

这是因为url-loader本身优先是将资源Base64引入的。虽然图片Base64可以减少 http 请求,但是对于1M+这么大的图片都Base64处理,范围增加了 CSS、JavaScript 等文件的大小,而且将这么大的Base64反解成可以使用的图片渲染出来,时间消耗也是很大的。

所以这时候需要使用url-loader的limit选项来控制不超过一定限制的图片才使用Base64:

{
     

这时候再执行webpack,发现多打出一个ad19429dc9b3ac2745c760bb1f460892.png的图片,这张图片就是large.png的图片,因为超过了limit=3*1024显示所以没有被处理成Base64。

继续查看index.html和main.js(index.js打包出来的文件),发现我们使用large.png的地址都被 Webpack 自动替换成了新的路径ad19429dc9b3ac2745c760bb1f460892.png。

配置 CDN 域名

一般静态资源上线的时候都会放到 CDN,假设我们的 CDN 域名和路径为:http://bd.bxstatic.com/img/,这时候只需要修改output.publicPath即可。

小结

这一篇主要介绍 Webpack 的如何处理图片。页面经常用到的图片是页面的重点,Webpack 提供了很多插件和 loader 对图片进行压缩、合并。Webpack 还会使用url-loader等插件,将较小的资源通过 Base64 的方式引入。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值