webpack4.0各个击破(3)—— Assets篇
【摘要】 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本)
一. 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并输出至构建文件夹。
CSS
文件中对图片的引用也被替换为修改后的hash名称:
html
文件中静态资源引用替换需要通过html-loader
。
2.2 引用优化
构建工具通过url-loader
来优化项目中对于资源的引用路径,并设定大小限制,当资源的体积小于limit
时将其直接进行Base64转换后嵌入引用文件,体积大于limit
时可通过fallback参数指定的loader
进行处理。
在webpack.config.js
中添加url-loader
相关配置:
原始CSS
文件中对资源的引用:
打包后变为如下形式,可以看到小于8k
的资源被直接内嵌进了CSS
文件而没有生成独立的资源文件:
也可以根据实际需求选择svg-url-loader
,image-webpack-loader
等其他插件。
2.3 sprites雪碧图合成
雪碧图合成,听起来是一个显得略高端的知识点,但它并不是必须进行的,任何一种技术都有其使用场景。有的场景下需要将图片资源合并为独立的雪碧图而减少http请求的次数,有的时候或许通过url-loader
直接将其嵌入文档就可以。矢量图在不同场景下的处理方式也不相同。
webpack
官方仓库并没有推荐图片的处理工具,而是采用url-loader + file-loader
作为资源处理的一般通用方案。
1.位图处理
位图资源,可以使用webpack-spritesmith
插件进行处理,在webpack.config.js
的plugins
配置项中实例化插件并传入配置信息:
运行webpack
后可以得到sprites.css
和合成的雪碧图:
2. 矢量图处理
开发中常用的矢量图为svg
格式,既可以使用inline-svg-loader
进行资源嵌入,也可以使用svg-sprite-loader
将矢量图资源合并为雪碧图,具体采用哪种方案,需要由项目的实际情况来判断。矢量图的合并原理与位图稍有不同,感兴趣的读者可以自行搜索。
源代码中的引用:
使用inline-svg-loader
加载器打包后的引用:
2.4 图片压缩及其他
图片资源是可以以清晰度为量化参考进行体积压缩的,webpack
的开发社区也有现成的插件,但不建议通过webpack
在每次打包时进行针对图像本身的处理,而是由UI人员处理好以后提供给开发人员。
demo.rar
来源:华为云社区 作者:大史不说话
webpack4.0各个击破(3)—— Assets篇相关推荐
- webpack4.0各个击破(7)—— plugin篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- Webpack4.0各个击破(7)plugin篇
目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...
- Webpack4.0各个击破(6)loader篇
Webpack4.0各个击破(6)loader篇 一. loader综述 二. 如何写一个loader 三. loader的编译器本质 [参考] 一. loader综述 loader是webpack的 ...
- webpack4.0各个击破(4)—— Javascript splitChunk
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(10)—— Integration篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(9)—— karma篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(8)—— tapable篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(6)—— Loader篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
最新文章
- 第二节 数学基础与语言学基础
- “智源 — INSPEC 工业大数据质量预测赛” 上线,为硬核工业制造炼就 AI 之心...
- GB0-190 考试中的知识点分布
- 一些意想不到的小bug。
- 【转】webgame前台开发总结--虽然是10年的文章,但是也有参考价值
- 反射学习4-通过反射机制动态创建和访问数组
- redis-server启动但进程里没有_Redis——服务器的启动过程
- 春节快乐!iPhone11 128G抱回家!
- 身怀56个IM技术专利,网易云信如何改变即时通讯?
- 通用测试用例大全(转自——知了.Test)
- 阿里公开Weex技术架构,还开源了一大波组件
- 【推荐软件】wingrep
- IdentityServer4之Authorization Code(授权码)相对更安全
- Data - 大数据生态圈
- 星界边境服务器Linux,星界边境starbound如何联机?服务器建立指南
- radix在Character.MIN_RADIX与Character.MAX_RADIX之间
- 一步一步玩转树莓派~
- 习惯养成android软件,六款有助于养成良好习惯的APP(安卓)
- SpringCloud调用接口流程
- mysql触发器不起作用_mysql – 授予模式触发器不起作用