02-尚硅谷-webpack从入门到精通-react脚手架介绍

好，同学们大家好，我是上关谷前端讲师熊健，接下来呢，由我给大家带来re讲师家的分析，好，那么咱们也知道下使用官方教车架的话呢，得用一个库叫做create re APP，那么接下来我们就使用这个库来下载这个官方教车架，然后从而分析里面的WiFi配置。好接下来我们来到我们的Vs code，好，打开我们的终端，通过play APP下载。我们名字呢叫me CI OK，好，那么这时候呢，他就会去下载我们re脚手架，会从远端的拿，拿到我们的这个销售架模板拿下来，然后呢，并且下载其中的一些依赖，所以呢，我们在这里需要静等一段时间就可以了。好，那么现在我们点开看啊，那么他呢，这过程中呢，就在一直下，OK，现在已经下载了大部分的内容，就在下载一些其他的一些依赖，所以我们不等啊，可以直接去分析一下里面的内容，好其实这里面呢，我们大家主要看一下这些文件啊，它里面呢有很多的，这里面呢是下载的所有的包啊，那么public里面放一些啊HM等静态资源，那么SC里面的方置是项目的源码啊，我们将来就是在这SC下面开发，然后呢，还有地址的忽略文件，这里忽略了一些常用的一些文件，还有呢，刚刚我们使用样下载的一个缓存文件，还有一个它自带的read me啊这个页没啥用啊。好，最后一个呢，来到这里适合page jeson，那么这里面呢，就包含了一些我们后面涉及到的一些WiFi配置，所以我们从这个PA jeen呢来一点点看啊。

好，下面我们来看，首先呢，在这里面都能看到，就是它有启动的指令有四个啊，Star呢是开发环节指令，必的呢是生产环节指令，Test呢是测试这里in这诶比较特殊啊，在RA中呢，默认情况下，我们的这个WiFi配置呢，是在这个scripts这个包里面啊，在包里面，所以如果你要找的话呢，你得打开nots去里面找，对吧，这样做的话那就不太方便啊，插起来不太方便，所以它提供那个指令叫address，这个address指令呢，就是负责啊将groups里面的WiFi配置呢打包到外面出来会在外面呢多两个目录来去新建这量啊去看到WiFi配置，从而呢我们能够去修改它，去操作它，好并且呢，一旦运行呢，我们就会发现这个指令啊也会变了，也会变了，好，那么我们来看一下，为了更好的分析，我们要运行这第四个指令来先进入到我们这个目啊，进入到目让n PM run咱们的T。

OK，那么因为这个指令啊，它是不可逆的啊，所谓不可逆的就是一旦运行打包出来的暴露出来的完全配置呢，是不能再还原的，所以呢，它就啊you说就提醒一下你是否要确定啊，那么咱们这输Y啊输y y yes OK，那么它呢就会暴露出来，同时呢，会下载一些相关的依赖包啊，所以在这里呢，咱们能看到多两个文件，一个是convi move啊convi move呢就是包含了我们接下来要分析的核心的WiFi的一些配置文件了啊好，那么接下来呢，还有throughs throughs呢就包含了我们启动项目的三个指令，这时候我们再看啊，再看这个就能发现它跟之前的启动指令不一样了，之前启动指令呢是通过scripts这个库啊帮我们启动，现在呢，我们通过node啊去运行对应的这个目下的文件study和tests啊这样去启动的，所以我们要研究这个开发环境，就应该从这个star d GS去开始去看起啊，研究这个生产环境呢，就要研究这个build。

DS，那么测试呢，我们这节这个章减呢，是不是不打算强调的，所以我们会忽略这个测试部分啊，好，那么除了这个指令以外呢，我们可以往下看啊，下面呢，还有一个E配置，对吧？E con啊，那么EP除了写在address里面呢，还可以写在点ERC这个配置文件中啊，那么现在呢，比较啊，就是不同人不同做法嘛，那么RA呢，喜欢把所有配置呢集中到一个地方，这样呢方便我们家去修改，去查阅啊，所以都在配中看到这个配置它的继承与一个库啊，叫做rest APP，所以你如果要仔细去看啊，咱们这个配置的话，就要看这个库啊，那么通常情况下呢，我们也是会直接拿这个东西去使用，然后在这基础上呢，再去修改一些可能我们觉得更好的规则啊，好，下面的broadli就是一个浏览器的一个列表啊，指的是我们样式啊，样式兼容性做到什么程度，那么这里呢，区分两个环境，一个是生产环境product。

一个是开发环境development，市场环境呢，我们要为了让我们代码呢，能够适用于市场上绝大部分浏览器，所以呢，做的兼容性的更加仔细一些，比如说第一个大于0.2%，就是指的是啊，超过我们现在市面上常用的浏览器的99.5%啊，就是六八啊，包含了90.8%的浏览器，所以已经很多了，他说呢，不要死的，也不要open迷你所有的浏览器啊，就是不要一些现在已经被市场淘汰的浏览器，这些金容性就没必要做了啊。

好，开发环境下呢，主要是为了让我们调试代码，能让我们看到效果，所以呢，这一块呢，制作的少一点啊，做少一点的速度就快一点，从而提升我们开发环境下这个打包速度啊，这次呢是测试环节，所以我们不研究啊，往下走，最后呢有BA配置啊，BA呢同样的有BARC这个配置文件啊，那么配置呢，在这想看的也是去这里面看它如何去进行转换的，好了，那么这里面呢，我们给大家看到一些介绍啊，就是咱们的这个脚手架呢，从下载到我们运行的一转的指令，到现在它呈现了个样子。