前言
乍一看标题似乎前言不搭后语，我写文章的初衷也是分享技术，亦在分享技术之外的东西，首先明确定位，我是谁？我是一个渺小到无人认知的个体，所以我知道，个人的力量无法对大环境造成改变。所以我希望大多数人可以有善于分享的心态。我不是鸡汤选手，一个很清楚的道理，先有大家，才有小家对吧，如果多数人的心态都是以己为中心，唯利是图，那么创新从何而来，如果遥遥领先和弯道超车成为一种讽刺的词语，那何尝不是一个时代的悲哀。
为什么越来越多的人从某搜索引擎找不到自己需要的知识和技能，你说，现在都知识付费，你得花钱才能获取你想要的知识。恰饭嘛，不丢人，但是如果人人都有这种思维，那么技术只被少数的人掌握，那么该如何量变引起质变呢？我当然不是赞同拿来主义，而是每个人都有善于分享的心态，才能让整个中文互联网环境逐步回暖。
图片base64
好了，聊回到图片base64，在我们日常项目的开发中，往往会用到很多图标对吧，如果这些图标我都是通过http请求来获取加载到页面上，是不是会带来加载的等待时间，为了解决这个问题，我们应该怎么做呢？通过base64的方式来加载一些较小的图片，一些较大的图片呢通过http请求来加载。你又要问了，为什么不所有的图片都采用base64的方式呢，因为转换成base64之后会带来代码量的增加，我们需要在其中找到一个平衡。
为什么前面写了很多篇关于webpack的文章，包括不限于loader、plugin等，如果你并不清楚这些概念和应用场景，我建议你去翻看一下我之前写的webpack相关的文章。
先来到vue-cli的文档:
从这儿我们获取到什么信息？图片会被作为模块被webpack打包对吧，我们知道，webpack本身只能处理js对吧，对于像图片这种如果想进行编译的话，我们需要用loader呢还是plugin呢？如果你对此不清楚，说明你还没有理解webpack的编译流程。先说答案，需要通过loader来处理。
然后，从上图中，我们还发现了，如果要将小宇8Kib的资源内联，需要通过webpack的Assets Modules，我们来到此处：
得知inline用法（也就是将图片转成base64）要通过url-loader。
那我们手动操作一下吧，这里准备好url-loader依赖以及图片资源：
复制配置文件过来:
入口文件编写我们的代码:
最后打包来到我们的控制台看下输出吧:
我们再验证一下吧，看看logo多少字节:
好的，我们将limit修改为6000再打包看一下：
nice，终端报错了，报错了你就要慌？不要慌，看看啥意思，模块打包失败，找不到file-loader，我们自始至终安装file-loader了没有？没有吧，说明啥？说明url-loader依赖file-loader，当我图片的字节数大于limit的时候，将会调用file-loader，是这个逻辑吧。
我们安装file-loader重新打包，此刻你发现你的dist目录里多了一个文件:
再来到浏览器控制台看下打印结果:
这输出的是一个绝对路径。
至此，你也应该清楚了项目里的一些资源用到base64与没用base64的区别以及他们是如何实现的。如果你喜欢这种一步步指引你的方式，请给我一个免费的一键三连。
尾声
世界从不分真正的好和坏，灰才是永恒不变的主题，如何在一个灰的世界中可以进步才是真正的智慧，进步一定不是国外套壳说成国产而骗补的行为，进步也一定不是拿纳税人的钱通过一些不为人知的手段满足一己私欲的行为，民族自尊心和自豪感一定是来自不自欺欺人而获取的真实成果，我也知道现在的被封锁的环境下举步维艰，但是你是中国人。