09-尚硅谷-webpack从入门到精通-vue开发环境配置（上）

好，上节呢我们提取了WiFi配置，那么接下来呢，我们先研究这个开发环境下的配置了，好打开这个配置文件啊，它到这里有些报错，没关系啊，我们改成改稍微改造一下，比如说modelity，将它暴露出去，那么整体呢就不会报错了。OK，那么这个路径呢，它会比较长啊，所以我们把这个路径呢，改造一下啊，不然的话呢，实在是太长了。好，我们把路径呢，直接改为一个空就OK了啊，看成FH，那么我们把替换为空就OK。好，那么路径呢，我们也改好了。那么现在呢，我们就可以在此基础上去研究它里面的配置了，首先呢，它第一个模式为开放模式，然后上下文呢，为这个斜杠啊，为这个斜杠就是以这个为目呗，那么node呢，就是也是一样的啊，咱们默认情况下呢，会打包这个node里面的一些模块输出到外面去，那么它这个配置呢，就是诶只是一些模块呢，它不参与打包呗，对吧，不参与打包，从而让打包体积更小啊，浏览器呢，不用添加额外的log GS一些模块。

好输出呢，这里就和咱们的R呢有些差异对吧？R呢是Bill的目录啊，View呢是低层目录，这是主要区别，其他的都差不多啊，然后呢，这是or呢，是解析的一些配置，那么在这里能看到它配置的些路径，别名艾特福啊，它的艾特服呢代表SC这个目录，好注意看到斜杠这一块啊，双斜杠就是代表，因为前面我已经把路径给替换掉了，对吧？那么所以双斜杠呢，其实这里就代表的含义呢，就是它是一个项，就是项目根目呗，所以大家不用太操心啊。同时呢，它第一个东西叫view多乐福啊，代表的是view.run time.sm.GS这个文件，然time这个文件呢，是代表运行式文件，是没有包含be器的，那么如果你引入这个文件的话呢，通常情况下，这个代码这个view的整个体积呢会变得更小，因为我们如果是用read方法去渲染，那么我们应该用这个runtime文件，那么整个体积就比较大，如果你用整个view的话呢，它是完整啊，完整文件里面是包含这个编辑器的，那么这样打包体积呢会变得更大，所。

现在我们建议大家引入view的时候，应该引入这个view德乐福，哎，这样的打包体积才更小。好，下面呢，是一些文件扩展名的补全啊点对吧，那么它同样的支持一些JSS相关的语法以及支持呢，现在一个较新的一种方案啊，一种叫WS啊WSW有兴趣的话呢，可以去研究一下，那么models呢，就是解析的时候，Models去哪里找啊，去哪里找啊，那么这种方式呢，其实和我们的啊RA呢基本一致啊，所以没什么看的。好插件呢，这里是PP的啊，如果你支持的话呢，就会相应的一些插件就会填上去，那这个呢，也不用操心了，下面这个呢，也是为PP去考虑的啊，为PP去考虑的同时呢，他也是啊，在这里没有添加额的差距啊，为PP考虑的。OK，然后呢，接下来看这个module啊，Module呢是我们的各个lo的一些配置啊，那么这里面呢，有一个no pass no pass呢，翻译过来就是不解析啊，就像这几个文件呢，一般是不参与解析的，因为这个库本身就已经做好了，你再解析那就多此一举了。好，下面的是详细的规则啊，收一下我们看详细规则，它这里面的规则呢，是挺麻烦的，挺麻烦的。

OK，我们能看到第一规则呢，是啊，RA for view啊，是对view文件进行处理的，我们打开看一下，它检测的就是view文件啊，一旦发现你view文件呢，就会使用下面的规则进行处理，那么右的执是个数组，数组呢，执行顺序是从下到上，或者从右往左，所以我们研究这数组里面怎么执行的，应该从最下面去看，它呢，使用这个loader叫v loader，你看啊，顾名思义这个v loader呢，就是专门去解析view文件，对吧？将那些style啊哦，Script啊以及tableilet块呢，解析成相应的块，代码块，然后再被其他load去处理，然后它这里做了一个很好的工作，就是cash load啊cash load呢，顾名思义就是一个缓存，对我们的解析呢，进行了缓存一下啊，那么第二次解析速度呢，如果你这个文件没有变化，那么自然就不会发生变化，从而呢，让它第二次打包呢，速度呢变得更快啊，那么后面呢，我们会看到很多cash load的用法，也就是说在MU中呢，它是比较新性，对吧，他认为MU这cash load呢，它的这个啊缓。

缓存啊，做的比它本身这些库的一些缓存呢，做的更好。好，接下来呢，是处理images啊，是图片往下走啊，处理各种图片，然后呢，使用的load呢，就是二，那不同的是呢，Limit它这里写的值呢比较小啊，如果是在RA中呢，是大概10KB左右啊，密轴呢是44KB左右，那么4KB呢，实际上是说实话是比较小的比较小，那么这个数呢也是一样是可以调整的，你不用去把它自己啊写的多么多么死啊。好，下面呢，接下来再看这里呢，是处理单独处理SVG图片的一种方式啊，处理SVG，那么这里面呢，是用fairo的处理，也就说不管你SVG是什么文件，你是啥，我发呢，就原封波动的输出到哪里去，好在下面的是处理些其他资源啊，其他资源呢，比方说是MP4资源啊，MP3资源等资源通过UR的进行处理，那么这里面呢，会对这些资源呢进行一些压缩啊，当然了，因为是4KB左右，所以实际上呢，能压缩的较有限。

那为什么有这个呢？因为很多官网啊，很多一些网站呢，喜欢在首页呢，给一个这样的一个呃，一个背景，一个这样的一个video嘛，对吧，有一个视频啊，一个视频等，所以呢，如果体积比较小的话呢，通过它来处理还是挺不错的啊。然后下面是持处理一些字体的啊，你一看咱们就是处理字体通过URL的，同样的呢，会做些压缩，所以从这一点呢，你会发现和咱们的这个啊re，想不一样，Re，像这些图片啊，这些音视频，这些资源啊，SVG的资源统一都交给这个final的处理啊，因为本身啊，你对4KB左右的去再去处理什么压缩啊，变成BASE64，其实没太必要啊，没太必要。好，接下来呢是park，那么MU中呢，它是支持park的写法的，也就是在table里面你写代码模板的时候，那么你除了能写正常的HL语法，你还能写park语法啊，还能写park语法，好，那么你当你写park语法呢，它这里就有个one of规则，对吧？以下这些load呢，只有一个能生效啊，一个能生效。

啊，也就是说这两个楼之间呢，只有一个会处理到这一个PA啊一个PA。