21.Webpack5从入门到原理-基础-搭建开发服务器

到此呢，我们已经把咱们的前端的能常见的资源呢，全都处理了。那么现在开发环境还要做什么事呢？那么接下来我们要做的就是自动化。原因就是我们每次写完代码呢，都得重新编译才能看到效果，非常的麻烦。下面我们来演示一下。我现在呢，想把JS代码呢进行一些修改。来，我们现在不是一加一加二加三加四，我再加个五。对吧，我已保存，那么如果我们直接运行这个打包后的这个资源，你会发现。它还是一加二加三加四，还是十，不是15没有变。原因就是我们改动的是源代码，没有重新打包，所以这个打包的代码呢，是之前的代码。之前代码是十，所以他输出自然是十。那这样的话呢，我们要想看到新的啊，这个情况我们得再次重新打包。

好，然后呢，这样呢，才会看到这个最新的效果。不单JS这样，CS的结构HL都是这样的，每次改代码你要打包一下才能看效果，非常的麻烦。我们希望一切自动化，那么有没有办法呢？有的就是我们接下来要学的这个自动化dev server。DB server呢，它会在WiFid这里创建一个，搭建一个服务器，开发服务器，它会自动的监视我们这个src目录下面的文件，一旦发生变化，它就会重新打包，自动的重新打包，那么我们自然就可以看到这个自动的这个最新的效果了。那么我们就得用这个技术啊，用技术的话呢，需要下载这个DV这个包。下载完之后呢，要进行一些配置，我们直接复制啊。来。我们要启动一个服务器啊，所以这里要做一些开发，服务器的配置要指定的有号是我们的服务器的域名，POS是服务器的端口号，欧盟为出呢，就是会自动打开这个浏览器。

这样呢，它一旦服务器启动成功了，浏览器就会打开，这样我们可以直接看效果。好，一旦你用DV server呢，启动指令就变了，之前我们是直接PE npspe就好了，好，现在是nspe serve才能运行。只有v PS WiFi so这个指令才能启动这个咱们的这个DV搜狗的配置，如果你用的是之前的指令的话，它是没办法启动这个配置的，虽然你写了配置，但是配置并不剩效。所以要注意啊，要启动的话呢，指定是npspe so。好，启动成功呢，它在这里会编译成功，同时光标会停在这里，代表这个服务器在开启着。

服务器还在运行。好，同时自动打开浏览器，显示楼空号3000。这时候我们呢，可以看一下输出的代码，它现在是一还是15，那么我们改动一下这个代码。然后把这个五去掉。一保存，它会自动的编译，你会发现它又重新编译了。那么一旦自动编译呢，那么浏览器也会自动刷新，会显示最新的效果。所以这样开发呢，就会比较方便，不管你改啥都可以啊，你改啥都可以达到你的效果，比如我们改样式。我上面这个呢，变成200PS。一保存诶，它就会重新编译，然后呢。页面就出现效果了。改H6我们去public下面，注意不要改输出的文件，改public下面的文件，我们hello派呢加个小尾巴一保存。那么诶，小尾巴就来了。所以这个地域server呢，它会自动监视我们的这些文件啊，一旦发生变化就会重新编译打包，所以非常的方便。

好，那么这个呢，就是我们的这个DB server的整个用法，首先下载一个包，然后呢进行一个配置，然后启动指令呢，变成n PS ipad serve，那么就可以达成这个自动化，这样呢我们开发起来就更更加方便了。那么最后一个就是这个开发服务器呢，它是没有输出的。没有输出的意思就是来我们把这个load关掉啊，然后把这个Dis目录下的东西给删掉。删除，你看第一次目录，现在是空目录，但是我们代码运行还是正常的。同时我们重新再打包一下啊，重新在MPS WiFi。在运行。好，终止指定的终止这个程序的指令呢，是node的统一方式CTRLC，按CTRLC那就可以终止这个开发服务器啊。好，我们重新预习一下，它的第一层目录并没有任何输出。

这里就要说一下，开发服务器它是不会。输出。咱们的资源的，它是在内存中编译打包的。所以开发模式下，我们是没有任何输出的。也不需要有任何输出，因为输出的东西它长什么样子我们也看不懂，我们只希望它在浏览器能有效果就可以了。我们能看到效果，能运行那就完美对吧？所以开发服务器这种没有输出的形式才是我们最终想要的形式。好，那么这就是开发服务器啊，它的配置以及它的一个小的特点。嗯。