09-尚硅谷-webpack从入门到精通-devServer

如何使用DV server？好，下面我们来看一个例子。打开这个Vs code啊，我们来新建文件夹，叫07DVR。啊，当然呢，我们先接到最外面去啊。07DV server。好，那它怎么用呢？我们来把零六啊这个代码呢复制一份啊，就之前写过很多遍了，我们不再重复写了啊，我们来复制到零七这。啊，这里面代码呢，它呢，这个外派的配置呢，它只能处理这个CS文件和其他资源啊，以及呢，这个HL资源，那么啊就是这个啊。要拿这些呢，我们就会印证了，印证啥呢？现在呢，我们可以把代码运行一下，看看效果啊。我们可以输入ipad打包意思。看一下他之前的一个效果啊。打包一次之后呢，我们拿到必要的目录中的index，哎，去运行一下啊，看一下呢，这个打包输出的资源呢，里面有什么内容。

好了，大家能看到的是，就是这里面呢，只有四张图标啊，没有一些其他的结构和样式了，没有了。好，那么我们要知道开发过代码呢，是个连续的过程，我们看到我们写代码这个情况之后呢，我们要接下来去开发新代码。那么好，我来试一下啊，必要的是构建后东西不用去改它，我们改的是src下面的源代码。我们写的源代码，比方说啊，我增加了个结构对吧，哎，Hello派。再加个结构。同时呢，我JS中呢，我还增加一些代码，比如说这个前面我们一直在写的这个方法啊。非常简单一个方法。好，我打一下。爱的。一二好。我增了个结构，加了些S码么，就，但是发并没有来，同时打开councill也并没有JS代码的打印输出。

这是因为什么呢？这是因为啊，就是我们构建后代码呢，是之前构建的，而之前构建的时候呢，这里面呢，并没有这些内容啊，并没有这个JS代码，并没有之前那个结构，所以你运行看到东西啊，是之前的样子。哎，那那就好了，那就有个问题了，那我现在就想看到我最新的结构和最新的这个JS代码呢。你要重新打包一次。重新打包的时候呢，他会拿到最新的内容重新构建，然后输出去，诶这时候啊，我们再去看的时候，诶，你会发现呢，结构就出来了。同时呢，这个JS呢，也打印出来了。那么好，那这里就说这个问题，那我接下来又得改结构，又得写JS代码，那我是不是每次都得重复的进行打包啊。哎，这样呢，就太麻烦了。所以呢，We派呢，就提出一个东西叫做DV server，把你自动的打包，自动的去做一些事情，这样呢，我们啊，开发者呢，就只需要写源代码就够了啊，这样呢能够让我们更加方便一些。

那么这个配置怎么配置呢？就叫做d server啊，来打开这个它呢，不属于我们前面的五个核心概念啊，可以单独的进行配置，叫做开发服务器。啊，它作用呢，干嘛呢，作用啊就是用来啊自动化的。所谓自动化就是帮我们啊自动。对吧，自动编译。自动打开啊浏览器啊，同时呢，还会有个自动刷新浏览器。对的。我们看一下怎么配置啊，叫低于sor啊，直接写低于只那么一个对象，对象里面呢，有一个content base。代表我要运行的项目的一个目录啊。那么这里面呢，也是一般写的选择路径。加上内。目录呢，就是那个必的啊，我们要预习的目录呢，是构建厚度目录，不是源代码目。

好，还有一个参数呢，叫compress。没错啊。这个意思呢，是启动GP压缩。好让我们代码体积更小，从而速度更快。啊，就这样的。好，然后呢，还有个啊，就是指定我这个开发服务器的端口号，比方说3000，那么端口就是3000啊。啊，同行。那么大概就这几个参数啊，就已经能够做成这个。那么开发服务器还有个特点啊，有个特点就是没有输出。只会在。内存中编译打包。啊，不会有。啊，不会有任何输出啊，到本地代码不会输。

好了，那我们想要启动这个第一啊，那得考，那也得指定又得不一样了啊，指定又得不一样了。启动。第1SERVE指定为。叫。是这个指令啊，所以我们得用这个指令好，用这个指令呢，你得把这个包呢给下载下来，所以呀，我们现在呢，又得下包了啊，回到之前输入n mi d-D，下载这个派D。二次预习。因为我们是本地下载，那么要启动本地这个DB外派d DB server呢，你得通过NPS去启动啊。通过NP。NGS的话呢，就能找到这个包呢，然后从而去启动它。NPS。好，那我们来可以试一试啊，等我们下载完成之后呢，我们可以用一下这个指令去启动这个。

嗯，好NPS。好，这时候呢，你会发现编译成功啊，这代码呢，会在这里卡住啊，并没有终止运行啊，如果终止运行的话呢，它会开一个新的这样的一个，呃，我们看啊，就会开启一个新的这样的一个，这样的一个表，这样的一个路径，如果没有开启新的路径呢，在这里，诶这个光标在这停着啊，说明程序一直在这运行。啊，运行结果怎么看呢？通过咱们的一个网址号3000去看，诶，这就是我们这个使用DV server搭建的服务器啊，这个服务器呢，启动的这个项目。那没有同学问了，哎，那好像跟之前啊，好像没什么区别对吧。诶，那不是啊，所以我们接下来再来看它的特点。我们现在呢，去改一下咱们的代码，我再增加一个DIV1保存，注意看啊，诶你会发现呢，它会重新进行编译，对吧，那么这个过程呢，我们就要自动编译。

他发他会监视啊，它整体的就是会监视这些SC下面的源代码的变化。一旦发生变化，就会开始自动的运行我们ipad的一些之前设置的内容，就是所谓的自动进行编译啊，一旦自动编译呢，它就会自动刷新浏览器，所以你打开浏览器会发现我这个结构就出来了。同时我们GS代码也是一样的，比如我再来一个看啊，我这里来个二加二，是不是它也会自动变异。一旦自动编译的打开浏览器，你会发现，诶，这里就出来个四了。你想是不是特别方便，我们呢，不需要再关心，哎，他做他呢，不需要再重复的输入ipad去重新打包，重新打包，重新打包啊，那么我们只要写代码，那么它会自动的去打包，自动的编译，自动的刷新浏览器，所以说感觉挺方便的啊。那么这里面还有个小问题就是啊，你看我们再来试一次啊，我把浏览器关掉。

就是当我运行运行之后再运行啊。他呢，没有任何反应，需要我们手动的打开浏览器，我觉得这里不好啊，所以我们还是要再改改一点配置啊。这里面呢，还加个加个参数叫open为。我出呢，就是自动打开浏览器啊。他打开的是咱们本本地的一个默认浏览器，所以如果你默认浏览器是咱们的这个Chrome，它打开的就是Chrome，我们再看效果。诶，你看它呢，就会自动打开浏览器，然后展示这些我们想要的内容了啊。那么到这里呢，这里面我们就给大家展示一下这个serve的一个基本配置，一共有这五个，这四个它的一个基本它的一个。当然是构建后的路径啊，构建后的路径。那么compress未呢，就启动这个gip压缩啊，Pro呢，就是我们启动这个服务器的这个端口啊，Open未的话呢，就是自动打开这个浏览器。

那么要使用这个开发服务器呢？大家记得要下载一个包啊，叫做wipe DV server。而这个包呢，因为是本地安装，你要想启动的话呢，得通过NPS这个指定NPS加上WiFi dp去启动啊。但我们外派呢，因为我们已经进行了全局安装，我们进行了干局安装，所以呢，不需要加NPS，直接启动就好了啊好，这个呢，因为我们没有全局安装，也没必要全局安装啊，所以用NPS就可以了。NS，那就可以启动这个指令了。好了啊，那么当你使用了DSO呢？它就会以自动化的做一些事情，比方说监视我们的文件啊的变化来自动编译我们的代码。诶，然后呢，自动的，当我首次运行的时候，会自动打开浏览器啊，当我写完代码之后呢，除了自动编译以外呢，它会自动刷新浏览器。所以呢，就大大的解放了我们的开发开发者，那我们开发者呢，只要关注于写原代码，其他的就不需要关注了。

那么最后的最后呢，我们要验证一点啊，我们说了它只会在内存中编辑打包，不会有任何输出啊，我们可以把必要的这个目录呢删掉。我们再重新构建一次。按CTRLC呢，输入Y就是终止这个之前的运行，再重新来一次。好。我们看效果，你看效果是还是有的，再看JS代码的打印啊，三四也没问题。然后呢，我们可以看零七这个目录下面并没有生成这个B的啊。好，这里大家要清楚，就是当你运行的指定如果是PA，那么它就会严格按照这个流程输出内容出去。但是如果你运行的指定是NPS派d server，那它是不会有任何输出的，它只会在内存中编译打包，一旦你终止了这个程序运行它呢，就会把内存东西又删掉，所以没有任何输出啊。那么这呢，就是我们的DSO的一个最基本的配置了。