06. 尚硅谷_自动化构建工具webpack_热加载实现.avi原创

来，咱们继续讲好，那上节课呢，我们对这个图片进行了处理啊，我们先把这些关一下吧，太乱了，现在我是不是只留了一个，只留了一个教程，那接下来，哎，打包图片的问题给大家看，我也给大家写在这儿了啊，其实在我们当前的出发点应该是设置它。那你要去灵活的去应用它，那接下来我们再去整一个叫自动编译打包，类似就是我们昨天GAP最后实现的全自动编译啊，在这呢，我们用到一个工具叫webpa-D-server，这个教大家如何在官网上去找他。这不是load吗？你还是找谁呢？找这个指南，找指南往下看。这儿有一个开发。看到这个没有杠杠server dev表示什么意思呢？

就开发server是服务器的意思，你要用这个工具，首先呢，避免不了你上来就得去下载它，哎这个时候我说一个事情，你咱们现在学的是最新的三点几的版本，那么它下载下来这个div server对应是二点几。因为二点几和三点几是一样的。他俩是一套，那么当你用onepa一点几的时候，一定要注意热加载的时候也必须去下载一点几。那下载完了，咱们进来到这看一下，这是不是二点几的，2.9和三点几的是可以通用的，哎，但是说一点几的不行。下载下这个哎库以后，它会自动多一个命令，就叫backpack-D-server命令的名字和它文件也是它这个包名是一样的，那这个时候我先去执行一下他。我先去执行一下他。

你会看到有很多的提示，注意看它是也是一个内置有一个服务器，那么它引用型会读你当前的这个webpa.com.gs，读你这个配置。然后呢，在人家的服务器里边去打包编译，这个时候你看他给我们提供的。这是不是有个地址叫8080，好，那么你看到这个以后，我们接下来应该做的操作是去访问一下这个local host，然后端口号是8080。那这个时候我反问一看，发现是。这是什么东西啊？这根本不是页面，这其实是什么？对应的那个文件的目录看到没有，是不src，这不是我们的原文件吗？那出现了这个是为什么呢？先给大家说一下web pack-D-server，你在使用的时候应该有一个配置。

我把这个module收起来，这不是output吗？现在我再去加一个配置，好像就叫div，然后叫server，哎，它呢也是一个对象哎。这是第一位啊，在这里边有一个属性叫content base。我看。应该是加他，哎加他。那么在后边这应该放置的是一个路径。刚刚我们为什么会出现这个情况呢？我说一下onepa-DV-server，把你原来的数据，原数据读到服务器去打包。记住了，他打包以后，它要生成一个文件，这个文件名和你之前设置里边的这个家伙。一模一样，因为它就是懂你当前的配置，他一看，哦，你想要输出一个文件名叫badr GS，然后呢，他打包完也会生成一个badr GS。

但是呢，这个文件只是放在了他虚拟内存。没有真正输出到你当前的文件。也就是说外派杠DV-server这个服务器，它会给你提供一块地址，你访问叫local host 8080，那这个时候访问这个点，相当于他在这放了个BY。JS，然后给你打开一个圈口，当你的页面想要访问的时候，你直接应该指向的就是这个文件名，而不带任何的路径，不需要带任何的路径。也就是说我们使用热加载的时候，通常来说我的页面这儿根本不需要。这些家伙。你直接指向的是一个文件名，而通过访问那个地址，我就能直接指向我。webpa-D-server为我们提供构建完的这个文件。

那把这些设置咱们改完以后打看我这应该是干嘛，我现在要说一个事情，他va派杠D杠，哎，Server。它默认哎，服务于。根目镜下了。index.html注意，我这有两个重点，一个是根目镜像，一个是index。那现在我这个大再跟目镜相吗？很明显我是不是往里缩了一层，那这个时候这个属性就要发挥作用了，就是count base。这个属性专门用来去引导我的webpa-d server，让它指向某一个文件夹下的index HTML。因为你不引导的话，我是把服务于是根进下了。

那现在我应该去告诉他，你应该去服务于哪个目录下的index。是不是应该是D的下列啊，把这些写好，把这些写好以后，我先把这个public给大家注掉啊。注掉，我刚刚说了它会影响它，我待会儿告诉你为什么会影响，那设置完这些以后我们来看一下。那这个时候你看啊，我我得先把他之前这个停掉。CTRLC，好，来yes，接下来我重新执行这个命令，哎，端口号肯定是8080，那这个时候我们来重新去访问一下他，大家看是不是直接能拿到当前的页面啊。拿到了以后注意了，我打包图片在本地访问的时候，是不是拿不到这张图片啊。在我的onepa-D-server里面不存在，它会自动去找，人家会找。

对，这就是人家服务器智能的地方，它有一个内置的帮助我们矫正路径的库。那这个时候我现在是用热加载，这是为我们开发人员去看的，这个时候你去改一个东西。最明显是改他吧。或者说改这个图片来，呃，就拿这个big吧，我们换成比如500500CTRLS，注意看这啊C。它是不是又重新去编译了，那是因为你的原文件发生了变化，然后来到这边。它什么自动变大了。那为什么会出现这种情况呢？这就要讲我们在引入背景图片的时候，它是个默认是会重复的平铺啊，如果说空间足够大，你可以什么设计？它有两种方式，一种是你用哎简写的方式，我是不是不应该带这个image，后边我是不是能直接写一个叫no repeat的东西啊。

那还有一种方式呢，我是不是能在下边在background repeat。那这个平台CTRLS来大家看这是不是又保存又重新编译了。先和大家说，你什么时候热加载成功了，你看到这个家successfully是不是成功的意思啊，那我们来看一下页面，哎，这下面虽然是有空间，但是我这个图片是不是没有平铺啊，这就是热加载，其实你看现在的效果和我们昨天那个GA那个全自动是一样的了。然后有的同学说可能说诶，他没有给我自动打开浏览器啊，啊打开页那个链接，我记得有一个他那阵的属性叫刚刚open。看到没有？其实这个杠杠open，它里面应该也是装的是那个open的库。

然后再去配置一个属性能懂不就是帮我们自动打开链接，那这是我们正常的热加载，没有任何问题，你比如说我再去改一个背景色。买一个什么颜色呀。CTRLS，好，下边动了，哎，来看这边。它是不自动就帮我们编了，那也说这对于我们开发人员来说特别的方便。特别的方便，我强调一个事情，有的同学的电脑可能说死活按着CTRL，这不编译，这没办法。那是因为你装完完dev server，它读不出来，读不出来你原文件的变化，想要变化它找到你，比如说找个GS文件在这里面，你去使劲的去修改它，比如在这来，本来这是个字符串，然后你咔咔咔。出个一长串，多输一点让尽量让他输完赶紧去CTRLS保存，下面就能编译，也是它能侦测到你数据的变化。

当遇到这个问题的时候，证明你们电脑该换了。这没办法啊，好，接着再来讲我们public对我们的热加热有什么影响，大家看我指其他的没动，我是不是只是把这个打开了，哎，我先证明一个事情啊，刚刚我说的我热加载的时候，我生成的东西是没有生成到本地的，是不是生成到我。第一位server里面的虚拟内存啊，大家看我怎么证明它，我把原来这个我直接全删了，你说我的热加载能不能加载。按照我刚才说的话，你理解一下能不能加载。可以加载，那是因为热加载跟你本地的东西没有任何关系了，能懂不？它只看一个东西，就是index HTML。那这个时候你看一下我热加载里面照样能够加载没有任何问题。哎，然后我们再去改一个，给大家证明一下吧。

Yellow，来个yellow green吧。CTRLS下边是不是又变异了到这边。换了没有，应该是换吧。来吧，来一个。这个家伙，CTRLS到这边。是不是就自动变了，那这个时候我们可以证明它跟跟我本地原来生成的一些静态资源文件没有任何关系，因为现在所有的操作都是在我这个DV server的服务器里面去操作的。接下来我呢，把这个public pass给大家打开来，先把之前的这个热加载我们停掉它，接下来我重新去进行一次热加载。是不是啥都没了，啥都没了，然后你去检查一下lo。发现你这个页面现在写这个路径是是不开了。

对不对？为什么会出现这种问题呢？首先我下边这一步没有任何问题。下面这一步没有任何问题，它只是引导DV server什么服务于diss下面的它。然后你再结合着，哎，Public class它有一个强制性，当我这一设置上，他立马告诉1HT吗，你找所有的资源什么，去这个下面去找。那也就是说我现在想要看到这个，我应该是这样去设。能不能理解？我写了个什么？小写，那这个时候我们来刷新一下，是不是又能拿到了啊，其实对于我们影响到不是太大，你得知道这个，否则的话你是调不出来它的。能懂吧，但是呢，你通常来说，哎，不用这个public class就没有任何问题，没有任何问题。

咱们还是不用public class，我呢再给大家证明一个事情。嗯，再证明一个事情，首先你得记住，先把这儿是不是没有任何的路径啊。接下来我刚刚强调了一个事情，我来看一下，它是个默认服务于各路镜下的index，你可以怎么做呢？我现在是不是把这个提到根问进去了，记住了这引入这个始终不用变，是因为它直接是不是指向虚拟内存那块地址了。接下来我可以把这个加号除掉。我是不是没有设置任何相关于它的信息，那这个时候你去把原来的热加载停掉，来一个PE-D-server，然后杠杠open走你。是不是也能出来啊，哎，没有设定任何的路径，那是因为我现在的index是不是默认的就在我的跟路径下呀。

他就能找到。我再证明一个事情，我刚刚故意强调了一下，它只服务于inex.HTM。你不要以为咱们平时随便起的index啊，都是起index，都是随便起的，正是因为大家的这种习惯，所以派杠第一个server在设计的时候要求他上来必须要找这个文件。怎么证明呢？解答。我是不是可以给他修改名字，现在是不是换成二了，那这个时候你再去刷新一下页面，你会发现又成这个了。是不是拿不到我们那个效果啊，这就是因为它本质就找的是index，哎，只要说你把它还原回来就没有啥问题，没有啥问题。这就是热加载，呃，热加载说白了就是开发的一个工具，方便你去使用它。我呢，先把这个视频停一下。