Web前端框架通用技术 webpack5 14_打包其他资源字体图标 学习猿地原创

大家好，我是学习园地的特约导师高若峰。随着咱们上节课讲完webpa打包什么图片资源，那咱们用这个webpa，咱们可以打包的将一些资源，你的资源啊，脚本资源，因为默认打包的就是JS资源和建设资源嘛，对吧，还有打包的图片资源对吧？这些咱们都去做了，还有呢，他这个晃的太慢了，打包的样式资源，还有SAS资源对吧？Nices资源这些呢，咱们都可以。那也就是到目前为止，你其实就可以用呃外派把我们项目里边需要的资源都可以打包了。那在开发环境开发完之后，打完包，然后把打包的代码我们上线就可以了，该优化的优化，该压缩的压缩，就完成了我们的任务，那么这节课咱再学一下，咱们前边没有打包的，对吧？那咱们页面有可能还会用到一些其他的资源。就是咱们没讲过的这些，咱们都归类其他资源，也就是有一些呢，是不需要优化和压缩处理的，直接输出的资源，我们都成为什么其他资源。都成为其他资源。比如说。

呃，什么是其他资源呢？像我们用到的呃，字体图标，那通常的一些新手在用图标字体的时候呢，他会怎么用呢？他通常都会用做一张图片对吧？但是你用图片的话，一是图片不能够通过样式来改颜色对吧？大小呢，有可能还会失真，调整大小的时候还会失真，如果我们用自己标来做的话就比较好，那通常呢，我们用自己图标的时候，我先不用外pad，直接给大家写一下用自己图标的方式啊，咱用pad外bpa，咱们打包一下自己图标，我们通常在写项目的时候用自己图标都使用，呃，阿里的一个产品叫I fo。这个你基本上在页面用到的图标都有。所有的页面上用到的图标都有在这里边，那比如说我们在这里边，嗯，你想要什么图标，你就可以在这里边任意的去搜索，比如说我想解释一下用户。对吧。这里边儿有这么多用户的一些图标，比如说我想1万亿对吧，看访问量这些都可以对吧，什么。

时间对吧，其中的这些都是图标对吧，这里面有海量的图标，那给大家用一下简单的一些用法，比如说。啊，给大家找一个吧，就比如说时间这个。我先不用外派，直接给大家用下用户的。呃，哪个衣服好看一些都差不多，这个吧，加入到这里边。呃，咱用一个，比如说一百一吧。找个大眼睛。这个吧。你看我加了三个图标，加三个图标呢，你可以对吧，直接用CDN，因为它就在这个库里边，你没有必要下在本地里边，然后打包，然后呢在访问，他直接在西边上能直接用，所以呢，他是跟嗯get哈合作的，所以呢，你登录这个可以选择data哈账号登录，那我这已经登录过了，我有get哈账号登录之后呢，你可以直接把这几个图标添加到你的项目里边来，那我的getate哈账号呢是EU player，那添加到这里边来决定。你看。就加到我的项目里了，那我这个项目里边一共接近120图标，一般的咱们做项目的图标也就那么几十个啊，因为这个呢，有多个项目在用这样不同的图标，你看我新加的这么几个对吧，然后有三种用法，一个UN的法，一个换class用法，还有一个什么symbol这样的一个用法三种。

UNO的嗯这个这种三种具体什么样的作用，那我们嗯等下载这个类的时候，里边有说明，那你也可以看这个帮助，比如说选择UNO的时时候，你看一下帮助怎么使用呢。啊，第一步把这个。对吧，考不到我们项目里边来第二步对吧，我们加上这个类，正好把它起了一个放拍的一个家族，我们把它看成是一个字体，对不对。然后呢，这里边应用到这个发这个字体对吧，然后我们去使用就可以了，是这样的一个一个步骤，那拷贝这个在哪呢？因为每次添加的时候，它都会重新生成一下，所以呢，我们在这里边。点击生成一下。点击复制，就把这个复制到我们这边来了，那我这里边新建一个。因为我是先不打包，所以呢不用这个音该TL，我新建一个S文件，我们叫做呃I放点STL随便写一个。

在这里边我加一个我直接用style了，直接用的这个把它加过来，但这个呢，只是做了一个字体的face对吧，那我们现在想，嗯，看到刚才帮助呢，我们需要用类，所以呢，他这块还需要第二步，那我们直接把它的这个类拿过来。FC。拿过来，拿过来之后我们就可以用这些图标了，我们用unico的方式，UNI方式呢，呃，用的比较少。比较少，那比如说我们可以用I标签对吧，然后plus使用这个类，I就用这个类，然后UN呢，就直接在这写代码，不直管对吧，你直接写代码，不能说直接写在类里边，所以这是用类的一个一个特点，那怎么用呢？你看比如说我想用这个大眼睛对吧，复制一下代码，复制U的码放到这个标签里边，是HTM内容，不是类的内容啊，然后这块比如说呃，一行一代表的是我们写的一行文字啊，然后我们这块换成一行二。

就代表列表前面用了一个图标。然后呢，我们把这两个也换一下。换成我们另外的一个图标，比如说time，复制代码放到我们这块来。编辑一下，然后我们再看一下，呃，用户或者代码。拿过来，诶可以了。这样的话，我们直接运行一下这个文件，因为这些字体你都在这个CDN上面，对吧，都在咱们项目的CDN上面，你是不用去管的，那在页面里边这么用就可以了，这是我们最传统的一个用法，你看123这几个图标是都有了，当然这几个图标我们也可以给一些其他的样式，比如说我们这块一个color。这颜色吧，颜色red红色的，那我们这块比如这个color，然后我们这个加个颜色color对吧，加这两个来我们预习一下看一下。是可以了，你看变成红色了，所以呢，你要用图片的话，就不能这么变颜色，对不对，那那假如说我现在这几个图标不够，那我还想就用一个新的图标，那我在这里边再重新搜索对吧？你想要什么图标你就搜索就行，比如说我们想要一个呃，Note。

Note的一个图标。嗯，用这个吧。啊，这个。添加到购物车这里面一样，添加我们的项目对吧，然后确定。那现在这里边儿你看啊，我们刷新一下。哪？刚才没加上没加进来吗。加进来的应该都在第一个呀。我再点击一下这个。嗯，我重新加一下。这有一个，但是不能我不能用以前的，那我再搜一个别的吧，我随便写个hello。好，还有咱来一个啊。行了。嗯，加一个外包。卖的派。

这样的一个图标。啊，这个添加这项。决定。有了复制代码你看啊。什么目的呢？I图标class等于icon。这块把它粘过来，咱们看一下这个有没有，就是你后加进去的有没有啊刷新一下。你看看不到图标，因为后边我再加一个行字吧。你看一下，你是看不到这个图标的。因为新加进来之后，对吧，相当于你这个版本变化了，版本变化你就重新编，重新更新一下这个版本，点击这个。啊。点击更新代码。看到了吧，更新代码，那你每个新加的，你只有更新完这个CDN，它才在会在CDN上更新，那这里边值是有变化的啊，然过来具体哪块变化你自己去对比一下啊，然后我们把这个重新CD换一下。

这样的话，我们再来刷新一下这个页面，我们自己页面诶。就有了这个图标了，对不对。啊或者是黑色，当然你可以给他反选一下，你就能看出来这个了，对不对。这就是我们平时用CDN上的这个字体图标，但是咱平时不这么用，咱说了我想把它当正用的也有啊，但是呢，现在咱们学ipad想把它打包到我们的这个里边，跟我们其他的CSS一样，对吧，作为一个打包的一个文件，那我们怎么做呢？啊怎么做，那我们这块就属于什么，就属于我们的其他资源，对吧，不需要优化压缩的这些数据了，那我们就需要从这个字体，我们把就把它字体比如看成其他资源，因为它不是HTML，也不是GS，对不对这样的文件，那我们再选几个图标，比如说嗯，VE。这样的图标加入了购物车。比如说RE4。That。嗯，你比如说我们这块再来一个呃web，呃派刚才好像搜过这个。

这个。购车有三个就三个吧，够我用了你30个，也是一样的道理，你可自己去选，那我们现在选下载代码。你看它就会下载下来对吧，我们到我们的文件夹里边显示。没下载完，下载完了对吧，我们解压。解压到当前文件夹下吧。统一掉。在这块你看这里边儿它有M告诉我们怎么使用，你看。这三种图标你看可以用unicode的，Unicode有什么好处，你看我刚才我说这会说明了，你看兼容性好，支持IE6对不对，以及现在的其他的所有的浏览器按自己的方法动态调整图片大小颜色，对吧，刚才咱们都试了，就使用这种方式，对吧？然后呢，这个用的是比较多的。因为这个呢，你看也是兼容性比较好，对吧，它呢相当于用那个方式的一种变种，但是写起更直观，直接用类的方式就可以来加载我们的图标是这样的，还有这种方式三种，那它是更全新的一种方式，当然呢，它现在用的还不多，现在我们通常用的呢，都是第二种方式那种，我就给你介绍了。

然后用的时候需要用到这个CS类，对不对，CS类，那我们就需要把这几个。打包到我们项目里边，那我们找到这个是这是DEMO，这个我们就不需要了，那我们需要的这个JS的我们也不需要了，嗯，所有的这个文件这个这个这个这里边它包里边包含的都需要拿到。这些文件。嗯。这个这个。接触这个我们看一下。嗯，在。都拷过来吧。除了那个。呆的。我们都把这些文件拷过来，都是这个字体开头的，直接放，当然你可建一个文件夹去啊。放这越来越多挂了。就不叫你俩直接粘到这个幕上。那将这个目录下，我们看一下，放了点class。

这里边儿它加载了这么多文件，看到了吗？这么多文件。正好这个这个这个这个啊，没需要那个其他的那些文件，然后呢，也是有这个类看到了吗？默认的是16号自己改小的，你可以把默认字体改小了，然后我们在页面里面通过类就可以了，不用在而TM中间内容里边去加这个，通过一个类名，我们就可以把这个图标给我们上，那这个时候我们需要把它。这些就归类于其他文件，因为你看有这么多后缀名了，对不对，那我们也可以按照原来的配置方式在这个里边。使用一个loader对吧，我们配置，你比如说在这块我们使用test，一个一个去匹配，匹配什么呢？匹配。这里边斜杠点括号，包括弧，这里边可以匹配什么呢？你比如说是ttf的，Ttf的资源对吧，然后是SVG的资源等等等等也可以这样，当然我们这说不了有什么图片，这边有这么多对不对，所以呢，我们可以不用派，我们可以换另外一种方式，用什么呢？我们用排除法。

排除我们前面加载过的资源，那这些就不是加载的资源了呗。ex，用这个排除test是匹配当前的资源，这是排除资源，也是一个正则，这上面写法一样，排除什么呢？排除多个资源，那我这块也是这么写，排除我们这里边的，比如说JS资源对吧？接层资源这里边都排除，这些东西都不处理，都算是其他资源，而GM资源，GSS资源，比如说还有什么，嗯，S资源，还有SGSSSS资源，以及那些图片PNG啊，GF啊，JPG啊，JPG啊，这都是上面我们处理过资源，我们怎么都排除，那就是其他资源，不用优化，不用压缩，直接输出的资源就可以了。排除这些资源，那这些不用优化，不用压缩，直接输出资源的都用一个叫做fair来处理，前面咱们也下载过，在下载UR的时候，顺便把这也下载过来了。只用一个就行，是什么file RO load，使用它来处理，那使用它来处理的话，资资源优化，那我们也需要怎么样，我们也需要把它打了包处理一下，对不对，那。

那需要通过一些参数去设置，这个参数咱们也讲过对不对，比如说我们里边让他都给我们输出到哪个目录呢。的时候，除了这些资源都让统一到买目录outut。呃，Pass。比如说我们都让他到啊。打包的那个build的目录下的，放这个目录下，你就属于自己处理了，对不对，放到目录下，那我们在引用的时候，当前目录引用的时候，到哪个目录去找呢？到public pass到这个目录去找。下放去找。对吧，那也就是我们如果在程序里边引用的时候。这里边你看找这些资源，这个你写当前目录，他就会到打完包之后就会到放自己目标去找。加这个。加上。加六。到这个呃木栏去找，就是我们在这块写好的指定目录，当然了打包的名称你可以保留原名对吧，那我们这块也可以指定内容，那上面的写法，那上边咱们处理呃图片的资源什么的，咱们是一样的一个方式，比如说如果我直接用name点。

什么？呃，Ext，那就是直接用。原名原名称，那如果加上哈希呢？嗯，Hash就加上哈希了，但哈希太长，我们取十位或者取前八位对不对，你就可以这么去写。这样的话会打包到这里边儿，生成这些名称。那在这个样式里边，这个样式打包呢，它还是用什么，还是用我们上面写的这个CSS这个去打包，对吧，这打包我们也没指定路径什么的，那他直接会到哪去没指定路径，那当然你可以在这块去直接指定这个，呃，这个CSS的这个路径啊，到到里面你可以接着指定路径，那他没指定路径，那他直接打包的时候，他会跟我们原来的那个style。嗯，这个打包在一起形成这个啊，那一会儿看打完包的咱们就知道了，那怎么使用呢？那我们到而加入里边，那我们怎么使用这块加几个压括。

嗯，P这里边随便写几个，你看我们可以用I标签，也以用什么也可以用，呃，SPA标签都可以用SPA标签吧，刚才那个是用I标签的，对吧，那比如这里边加上这个字体，然后icon我们用到了一个VE的。这块我们加上比如说一号一吧。压括号。嗯。有三个是吧，然后图标我们这块是right，然后这块。外派。加三个，这样呢，我们打包的时候，再直接使用的时候，就可以直接使用了，来我们先看一下能不能把这个资源都给我们打包上。我们外派如果有错误的话，我们再调整一下。啊，没有错误，那我们看一下。看用的不下。没有放。放目录。

这是图片。先看这里边。有什么包进来没打包进来，为什么没打包进来呢？因为我们这放的这个没有引用对不对，所以呢，我们还得找到什么，找到我们的src里边的，在我们的主入口文件的JS里边，我们引入一下块。引入一下，嗯，当前目录下的放这个保存一下，我们再重新打包一下。好，你就再看一下，你看出现放自己了对吧，名称还是这几个，后面面还是这几个，只给我加上哈希了，对吧？然后我们看打包的这个CS里边把把我们这个就是原来我们的CSS，你看，然后是把这个给我们打包进来了，所以找的路径我们办法只写当前路径，你看他找的放的这个路径对吧，已经加加进来了，那已有这些类了，这这些类呢，咱们说了CSS又给我们自动给我们加到这里边儿来了。加到这里边儿来了，使用立刻标签对不对，那你这块现在看不到，我们直接用呃。在这块啊，直接看这个运行这个。

来例行，你看下边这几个图标这块是不是都有了对吧。F12。下并我们加载的CSS，所以在这里边我们就可以用这些图标，这就是打包其他资源，那到现在为止呢，也就是我们需要的资源，应该是你在项目开发中需要的资源，我们都可以打包了，对吧？没有的话，咱们还用了一个排除法对不对。把所有其他的那些资源也都打包了。打包这么多，除了这些后缀名的图片资源的这些，当然这些你可以把它合到一起去啊，你看这些前面都通用的，合在当然不能写成一个文件，如果写成一个文件也可以，但是就是稍微复杂一些，对吧，最好是分面写，看着也清晰，当然这些你可以把它做成一个变量，用虚构啊的方式把它再加起来。你比如上面做成一个变量，然后通过变量的方式把这几个加起来就可以了。因为这几个前面这几个他都是一样的，也没有必要就那样的话，就看着就更不舒服了。所以这几条代码就可以把我们所有资源都打包，那下一步咱们学wipad学什么呢？那比如说学DV server，然后就是就可以配套开发环境了，那配套开发环境呢，有一些东西呢，我们还要优化，优化的时候可以优化我们这个开发环境，也可以优化完我们打包后的这样的环境，这是咱们后边要讲的东西，到现在为止，打包的工作就全完成了，剩下的就是做服务器和优化了。好，谢谢大家，这节课我们就讲到这里。