10-尚硅谷-webpack从入门到精通-vue开发环配置（下）

那么下面再往下看啊，那么这是处理样式的，那么处理样式呢，我们能看到它这里也是一个one of，那么处理的可能会稍微细致一点，它one of呢，分为一个loader，两个loader，以及三个，还有第四个四种方式处理，所以呢，我们要一点点去看一下啊，那么首先第一种啊，打开那么能看到它这里有个选项叫resource，叫做query，这个Mo啊，那么这个意思呢，我就可以写一下，它呢，实际上就是为了排除这一些文件啊，说白了就是为了处理这个style这种标签的一种文件，就如果你在里面啊，我们可能见过啊一些style标签，然后呢，Lay等于Mo啊，如果你这样写，那么他就会处理好这个相应的文件，所以这个这块处理呢，就是专门为这些load啊服务的，所以呢，他写了个规则去匹配相应的文件，然后使用以下这数组这个loader去处理，那么这个loader的数组呢，其实就是首先对CS的兼容性呢做了。

处理，然后呢，再将我们的样式呢进行编译，对吧，编译完之后呢，再通过view download插入到相应的页面上生效啊就这样的。好，然后接下来呢，下面这个规则呢，是resource判断这个密文件啊，那么这里呢，它是为了检测，就是普通的一些style标签啊，这里的实际上就是检测就是普通style标签，它不是什么me啊，检测这个的，所以如果你就是普通style标签，没有写任何东西，那么以下规则就会生效，对吧？以下规则生效它呢，也是一样的，做样式兼容性啊，Be啊，然后再插入到页面中生效啊，就这样的开发文件呢，是不需要提取成单独的一个文件，所以都是用style view style load加压时呢，插入到页面中生效。好，接下来再往下走呢，这里有个点module这个东西啊，那么这里注意是TT呢就是匹配一些指定的文件，所以在这里呢，匹配的文件呢，是一些点module啊，点叉叉结尾的一些文件。那么这些文件呢，不就等价于咱们之前学习的那些样式文件吗？就是咱们学习RA的时候，他对样式的模划就是判断这些文件的，而这里就是对样式的模划做一些处理啊，也支持这种点modu点叉的一种方式，所以我们能看到它除了能做兼容性外呢，在c load这里面加了个modus选项对吧，就是为它的一个啊一个命名做了个处理，那么只要你是这样的文件，那么它最终呢，打包出来的样式呢，就会加上一个哈希值对吧？那么从而呢，让样式呢打造一个模化，而多个文件之间的样式呢，不会互相影响啊资质这个最后呢，就是为了一些最最普通的样式做些梳理啊，最最普通的样式做梳理，那么它是也是兼容性啊，Cota和S就没了啊，所以真正呢，里面会做这个啊，魔化的最样式的魔化的实际上就是这一款。

那么它呢，在这里会做好了，OK，那么下面呢，其实能看到它下面呢，就是针对的是posts这种方式的电式呢去做处理啊，那么里面的处理规则呢，也是一个one of啊，Module啊，View啊，然后判断点module这个文件，以及啊这个啊普通的文件，所以呢，这个posts这种样式CS写法呢也是类似的，然后呢，同时它支持sa，那么写法一样的，它无非就是在这个基础上的多了一个sa load解析这个文件啊，多s load，所以我这些样式呢，我们就不一个研究了，因为它每个写法都是一样，对吧？上面是为style那些类的modu服务，这里是对咱们的普通style服务，这里面是点modu点叉S这些文件服务，那么下面呢啊，就是为最普通的一些样式服务了。

好，这里处理是SS啊，SS呢有两种写法嘛，所以写了两个，那么接下来就处理less，那么接下来再处理style，所以呢，在view中呢，它处理样式呢是蛮多的，什么样式都帮你考虑好了，好在中呢，它默认只是CS和这个S啊，就这样的。好下面呢就是处理GS的规则了，对吧？处JS啊，好，遇到JS呢，它首先呢会采用这个blo的对JS代码进行编译，然后再使用cash load的去缓存，所以这里也就和咱们的rest不一样了，Rest借助了lo的本身的一个属性options里面的cash去做缓存，好VI用装呢使用的是cash order去更好的做缓存啊，就这样的。

好，再往下走呢，有一个是检测的是real文件啊，那么这是pre啊，所以呢，它会优先执行，他呢先去执行这个操作啊，那么这里呢，它排除下面的一些文件，然后使用yes it no对它进行语法检查啊，下面的语法检查，那么这里呢，使用cash啊，也是做缓存。好，那么到这呢，基本上一样，JS文件就处理好了，就是JS呢样式呢，其他文件都处理好了，使用这些load，那么下面呢是一些呃代码分割这种方式，Optimization就是一些代码分割的，那么这里呢是分了一些组啊，Windows组和common组啊，那么不同的是就是它呢在这里做详细化分，那么lots里边文件都会打包到打包的名字叫创杠Windows这样的一个模块啊，这样模块那么游戏体更高，干十是更高的，那其他模块呢，如果被引用了两次啊，就会打破成创创common这种方式啊好呢，将这个组呢名字呢改了一下，改了一下啊好，R呢是用的是word认名字，其他的呢基本上没变。

好，接下来的是压缩选项，这里面是压缩JS的一大选项，那这选项呢，也不用管啊，不用管，想详细研究的可以找得到仓库，然后点进去里面去看啊好，最后呢是一些插件，那么view view呢，解析view文件呢，需要用两个东西对吧？第一个是view loader apply，它能够解析相应的view文件，第二个呢，是view Di来解析里面的相应的样式啊，那插入到指定的组机中生效，所以呢，两个东西相辅相成，最终来帮助我们去解析相应的这个处理啊好啊，接下来呢，定义呢，写环境变量，诶咱们定义成development是环境变量，好，再往下走呢，这个插件呢，其实和一样啊，是禁止，就是我们大小写必须一致啊，不能大小写不一样，呃，然后呢，这个是一个错误，友好一个提示，对吧，你们如果报错了，那么提示跟友好，那么在rest中有相应的一个插件啊，那么再往下走的是HL一个插件去对吧，捕获这个public下面的index HL这个文件，然后输出出去，然后。

好，下面呢，是view中的一个独有的一个预加载啊，预加载啊，Prefe和pre load的啊，那么这两个技术呢，有个问题就是他们兼容性啊可能较差，但是优点呢，就是在于他们可以对吧，等空闲时间呢，去提前加载我们后面需要用的这个JS文件，所以整体的性能呢，可能会比较好啊，兼容性就是双叉，所以在开发环境下呢，你用这个其实没啥问题，然后呢，那么加载黑名单啊，这些map文件和这些热门化替换的文件呢，是不加载的，优先加载我们需要用的一些主要文件啊，主要文件好。

然后呢，就这样的，那么最开始需要加载的东西呢，是采用预加载啊，后面的呢，是prono加载的，那么一些义务下载的，比方说经过代码分割的文件呢，是采用presh下载啊，这是不一样的。好啊，具体到flash有什么区别呢？大家可以回顾一下，之前我们看的讲的这个WiFi和那些高级部分，自然就看得到了，那么最后呢，下面能一个复制插件，复制插件呢，它会将这个public里面资源呢copy到这个第M东西，复制的是整个文件夹啊，复制整个文夹，但是呢，要忽略这个index HL文件，也就说除了indexl文件不复制以外的其他文件要复制，而index HL为什么不是呢？因为之前有个插件啊，前面有个插件叫HL外拉，它会帮我们把HL文件打包过去，所以我们复制呢，就不需要再复制了啊，当然这个文件也不复制啊，OK，最后导的入口呢，是叫man.JS好，这就是咱们的view的一些配置了，所以看起来呢，其实是挺简洁的啊，挺简洁的OK。