08-尚硅谷-webpack从入门到精通-打包其他资源

我来学习的是如何打包其他资源，其他资源呢就是啊，比方说我们图啊，我们开发中可能要选择一种字体来去做啊，这图标呢，就属于其他资源。这资源特点就是我们不需要做任何处理，只要原封不动的输出出去，那么就OK了啊，这就叫其他资源，就是不需要做任何处理的资源，不需要做优化啊，也不需要什么啊压缩啊等等，那么这些东西呢，统一归类于其他资源。好，那么要想做这个事呢，我们首先得有字体啊，要字体的话呢，我们需要打开我们的网页。好，然后呢，去下载一些字体。去这里面的去下载一些东西。开源的一些内容啊，我们呢，就找，就比如说这四个吧，就不不去别的地方找了啊，比如就找四个图标啊。那么你也可以多一点，也可以少一点，也可以找其他图标都行。我们主要是通过这个方式呢，去演示一下怎么去打包这些自己图标。好，那么这里有四个资源啊，那我们我们就会用了。

这里呢，有个购物车啊，就是刚刚我添加进去的，我们可以直接点这个下载素材。啊，下载它。啊，颜色的话呢，我们调成就这个色啊OK。直接下载代码，下载代码就好了。好，下载完成之后呢，我们打开啊，那么这个东西呢，就是我们下载好的这个啊，字体图标我们可以解压一下啊。好解压完成，那么这里面呢，就包含所有字体图标的所有配置了和配置。我们可以打开这个HL页面，去看一下这次图标到底怎么使用的。它有三种用法啊，分别叫做unicode class和symbol。那么U口的特点呢，它这写了啊，金融性最好支持IE6啊，就是这个啊，它呢是缺点就是不支持多色。而且呢，写法的稍微的麻烦一点。Class呢，就是写，它是UN的一种变种，那么解决的主要痛点就是它的一些书写不直观，语不明确，语音不好的问题。

那么问题来了，就是plus兼容性稍差，支持IE8以上就I8以下的是支持的。啊，但是因为我们现在主要从事框架开发的话呢，其实这种class已经足够了。那它优点就是语义更加明确，写起来更加简单啊，所以呢，我们待会儿会用first class。而symbol的话呢，主要是通过SVG去使用这张图片，那么缺点就是啊，金融性较差一些，金融性较差一些啊就这个，然后他说性能呢，可能稍也稍微差一些啊，这是这个，但是呢，特点就是只是多色啊，只是多色。啊，可以就是多色图片。好，那么我们因为是大一图标，所以我们直接用fo class就够了。那用法呢，是需要你先引入样式文件，然后通过span标签去写。所以待会呢，我们要分别写结构，哎，还要引入这个样式文件这两个东西。所以接下来呢，我们来写一写代码啊，写写代码。打开这个代码code啊，好了，我们来新建一个文件零六，叫做打包其他资源啊。

OK，好，我们在这里呢，新建一个文件夹加C啊，写项目的源代码。在这里面呢，再新建个文件啊。资源。好，HP资源这里面呢，我们写下基本的结构。然后呢，包里里面呢，我们来写这东西啊，我们待会儿呢，要看自己图标能不能打包清楚啊，所以我写几个SPA啊。自己图标的写法呢，我们得参照刚刚的那个啊这个DEMO。我们的class类名呢，叫做icon icon test1 test1或者TEST2TEST3啊，叫做这个名字，所以我们也可以叫做名字啊，我们把这class name给复制一份。也复制一份好，那么这个类名呢，就可以从这里的名字呢去选择啊去选择，比如说这个呢，就叫ICON1。

I1。好，复制几个啊，分别叫TEST2TEST3TEST4啊，应该是没问题的啊，不是TEST1TEST2TEST3啊写错了。我们就把它改成一啊。好，那么三个SPA标签就写好了啊写好了那么下面呢，我们啊需要写个入口JS文件应该写JS。负责引入这个样式文件，而这样式文件呢，我们在这儿啊，在这儿需要引入啊这个icon.cs。啊，这个ics呢，在这里面也其实用了是icon.css这个文件啊。好，我们引入这个文件，同时我们来看一下除了引入这个文件以外，还引入什么CTRLC。

看。好，引入这个文件，我们在这里呢，要通过import语法将这个文件呢加载进来。OK，看这文件啊。这文件里面呢，他呢写了很多样式的内容，其中啊，其中这里面呢，他又用上了一些问文件icon icon t s。那么这个图片文件呢，在这儿啊，UT SVG t tfwol啊，全都引进来。那么来，到这来。那么这四个文件呢，就到齐了啊，到齐了，那么我这四个文件呢，就能找到了。OK啊，OK。好。那么这里呢，我们当然啊，当然下一步呢，就是可以直接直接去写代码了啊。那么结构呢？已经写好了四个SPA。那么样式文件呢，也引进来了，同时呢，字体图标文件呢，我也引进来了，那我们接下来就要写WiFi配置来尝试打包这些字体图标啊。

啊，新建个WiFi配置。好，那么这里面呢，我们分别打包的是图片啊，咱们的样式资源，H资源以及自己图标资源。好，我们也是快速写下啊。好，前面呢，应该我们写过很多次了啊，那相信大家应该是挺熟悉了，那么第一个呢，又是entry啊，它的一个入口文件JS。好，第二个呢是输出output，哎，输出到哪里去对吧，那是个对象有个fair。A Bill子得。好，还有pass我们的一个路径啊，Pass。好，这里面呢，我们来引入一下这个方法，就是这个方法它来自于我们的pass。OK啊，然后呢，干。然后呢，加上我们的构建目录，必要的。好，接下来呢，我们还需要去写相应的内容，因为我们要打包样式文件，所以我们要写我们的啊。

那么写我们的规则啊。规则呢，要处理的是CS文件，不是，所以我们pass这个检测的地方呢，是斜杠点CS文件。那么C文件呢，只需要使用两个load去处理就可以了啊，Load呢，用use。分别加style。和这个。好就OK了啊，然后呢，为了处理咱们的这个啊。对吧，这里面呢，要写个template为true。啊，为我们的这个路径啊，SC下面的EXH这个路径。好，那么这个插件呢，需要引入啊，不需要引，但是插件需要引。

对吧。然后最后一个就是要写个模式啊，咱们为了调试方便，都是开放模式。Development。那么到这呢，我们就写完了一个最基本的配置啊，最基本配置又写了一遍啊。那么因为这些包呢，前面我们都下载过了，所以我们不需要操心了，我们现在操心的是如何打包其他资源。打包其他资源呢，我们会有一个啊。Test a test检测谁呢？检测那些字图标文件，你可以在这里一点点写是不是对吧？诶你也可以不写test。对，你可以啊，你像我呢，反正就是打包其他资源，打包其他资源的意思就是。除了比如说H6啊S。以外的资源，那么都叫其他资源对吧，所以可以用个exclude。

去排除，排除一些资源。还是什么资源呢？哎，排除这个。比方说。资源排除这些资以的资源呢，那么就了啊，就这。所以呢，你可以通过test去检测，也可以通过去排除排除。这个CSH，那么自然就会包就处理资源。那么再通过loader，诶，这里是前面少写个逗号啊，再通过loader loader呢叫做loader去处理啊。之前我们下载U的时候已经下过了，所以这块呢，不需要下载了啊，不用下载，可以直接用，可以直接用。那么这个意思就是排除这些资源以外资源呢，都通都会经过这个的处理啊，就是这个。所以可以通过一次的这这个。

属性去排除一些资源而打包。其他。好那么好，那我们来看效果。OK。哎，当然我们这里错了啊，我们这个目录呢，要改一下是这个零六啊零六。这是派。啊，没报错，看输出的结果，你看会有SVTFT啊，他们的名字同样的是根据文件内容生成的一个哈值啊。好看必要的啊，必要的下面呢，就会有这些东西啊，有个东西其中呢，HML的会引入这个JS啊，JS里面呢，肯定会有这个icon.s这个文件啊，Icons文件。好，那下面呢，我们来看结果的话呢，就是把这个HL文件给运行一下就好了。哎，你看这四个字体呢，就出来了啊，就出来了。所以字体呢，OKOK啊。那么这里呢，就是打包资源啊，打包其他资源呢，我们统一用这个处理。

那么我们只要填写一个排除资源，排除某些资源不不处理，那么就可以了。因为我们这里只有三，所以我排除了三，假设你将来还有less，你这里还可写排除less啊等等，就在这里写清楚就OK了。把一些我之前处理过的资源呢给排除掉，那剩下资源呢就交给处理。哎，同样的啊，他的输出的名字太长了，这里面呢也可以加个option。Options。那写个name，哎，你名字太长对吧，那我就给哈希值呢，我就只取十位对吧，然后再加上它的本来的这个文件扩展名ET，那么就可以了啊。二值取十位ET，加上它本能的恒迹扩展名，所以我们再构建一次。诶，你会发现呢，生成的这个文件名呢，明显的就会短一截啊，就会短一截就只有十位了啊，然后呢，哈希值呢，还是跟之前的哈希值一样，因为文件内容呢，并没有变化。好。那么到这里呢，就已经完成了这个其他资源的处理。