webpack4.0各个击破(3)—— Assets篇

大史不说话 发表于 2018/08/27 10:52:33 2018/08/27
【摘要】 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)

88.png

pic0.png

一. Assets资源的基本处理需求

Assets,指项目中被引用的资源,通常为各种格式的图片和字体文件,当然也可能包含各式各样其他扩展名的文件(.json,.xml等),常见的图片和文字资源的处理包括:

  • 体积压缩

  • 雪碧图合并及引用修正

  • 资源的引用路径自动替换

二. webpack处理引用资源

2.1 资源打标

webpack通过file-loader处理资源文件,它会将rules规则命中的资源文件按照配置的信息(路径,名称等)输出到指定目录,并返回其资源定位地址(输出路径,用于生产环境的publicPath路径),默认的输出名是以原文件内容计算的MD5 Hash命名的。

webpack.config.js中添加对图片文件的处理规则:

 {    test:/\.(jpg|png|svg|gif)/,    use:[{      loader:'file-loader',      options:{        outputPath:'imgs/'
      }
    }]
  }

执行打包命令可以看到png图片资源的名称被替换为hash并输出至构建文件夹。

pic1.PNG

CSS文件中对图片的引用也被替换为修改后的hash名称:

pic2.PNG

html文件中静态资源引用替换需要通过html-loader

2.2 引用优化

构建工具通过url-loader来优化项目中对于资源的引用路径,并设定大小限制,当资源的体积小于limit时将其直接进行Base64转换后嵌入引用文件,体积大于limit时可通过fallback参数指定的loader进行处理。

webpack.config.js中添加url-loader相关配置:

image.png

原始CSS文件中对资源的引用:

image.png

打包后变为如下形式,可以看到小于8k的资源被直接内嵌进了CSS文件而没有生成独立的资源文件:

pic3.PNG

也可以根据实际需求选择svg-url-loader,image-webpack-loader等其他插件。

2.3 sprites雪碧图合成

雪碧图合成,听起来是一个显得略高端的知识点,但它并不是必须进行的,任何一种技术都有其使用场景。有的场景下需要将图片资源合并为独立的雪碧图而减少http请求的次数,有的时候或许通过url-loader直接将其嵌入文档就可以。矢量图在不同场景下的处理方式也不相同。

webpack官方仓库并没有推荐图片的处理工具,而是采用url-loader + file-loader作为资源处理的一般通用方案。

1.位图处理

位图资源,可以使用webpack-spritesmith插件进行处理,在webpack.config.jsplugins配置项中实例化插件并传入配置信息:

运行webpack后可以得到sprites.css和合成的雪碧图:

image.png

pic4.png

2. 矢量图处理

开发中常用的矢量图为svg格式,既可以使用inline-svg-loader进行资源嵌入,也可以使用svg-sprite-loader将矢量图资源合并为雪碧图,具体采用哪种方案,需要由项目的实际情况来判断。矢量图的合并原理与位图稍有不同,感兴趣的读者可以自行搜索。

源代码中的引用:

image.png

使用inline-svg-loader加载器打包后的引用:

image.png


2.4 图片压缩及其他

图片资源是可以以清晰度为量化参考进行体积压缩的,webpack的开发社区也有现成的插件,但不建议通过webpack在每次打包时进行针对图像本身的处理,而是由UI人员处理好以后提供给开发人员。

image.png

  • 附件: demo.rar 33.37KB 下载次数:0

    附件下载

  • demo.rar 33.37KB 下载次数:0
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。