20-尚硅谷-webpack从入门到精通-HMR

接下来我们要做的是开发环节的第一项配置，优化开发环节的打包构建速度。好，那我们先来看一下现在我们的开发环境有什么问题。我们呢，将之前的这个零八开发环境配置呢，复制一份来重命名一下啊叫18。咱们的HR功能啊。好，我们来看一下这里之前我们写的配置啊，前面注释就不需要了。我们呢，引入了so pass啊，引入了HM we，简单看一下就是我们通过这个load和这个配置解决了样式资源的配置。通过这个URL呢，解决了图片的处理。再通过H呢，解决了H中图的问题啊，再通过解决了其他。再通过HML解决了HM资源的问题。然后呢，一个。

好了，模式呢，是开发环境。好，那么下面我们来看一下这个配置呢，存在什么问题，我们右键啊，在资源管理器，在咱们的终端中打开它，然后运行指定啊，注意开发环境指定呢，通过N。要注意啊，PS server。这样呢才能启动这个外派低于server这个配置啊，如果你运行派那是看不到什么效果的啊，所以大家注意指定不能写错了。预行指定NPX外派deep。好，现在呢，就启动了这个配置啊，这个配置呢是没有问题的啊。好啊，那这里注意啊，这个404呢，指的是这个咱们这个图标啊，这个图标找不到啊，那这个图标呢，我们现在不关心，所以呢，再刷新一次这个错误呢就没了啊。好，OK，现在呢，JS代码也预期没问题。好，那现在有什么问题呢？我们来测试一下。我在代码JS这一这一步这里呢，打一句话啊。

还有什么就代表DS文件。可以重新下载了。别加他了啊。那它会重新编译的，我们不用管啊。好，那么只要我这个indexs文件被加载了，它就会打印这样一句话。好，我要看什么呢？诶现在呢，我们去修改样式文件，我们呢把这个宽度呢调宽一点，比如调成400保存看效果。这时候你会发现它明显这个内容呢被重新打印一次，然后呢，这个图片的宽度呢，变得更宽了。我们再看一下，再仔细看。我把它调回来调成200已保存，你看整体页面呢，被刷新了，东西呢又被重新加载了。啥意思，就是当我们去修改这个样式文件的时候，哎，明明我们JS文件没有变化，但是JS文件呢，得被重新加载一次。

所以呢，他打包的时候呢，看似我们只修改样式文件，实际上是把JS文件也一起重新打包了一次。好，这是一个问题啊，然后呢，我们JS文件呢，再写点东西。我再写一个模，比如叫princess啊。好在这里面的第一个方法就叫。啊，一个打印的一个函数啊，这里面呢，我就定一个要打印的内容。好，然后呢，我这里呢，就直接打印这个内容了。然后呢，再将它给露出去啊，通过Excel语法默认这个。OK，暴露完成之后呢，我们再。中引入它，好，当然这里面还要打一句话啊，叫print加载了。然后呢，我们入口文件中将这个JS文件呢引进来。

OK，引进来之后呢，我就在下面简单的调用一下看结果啊，调用一下看结果。那么好，那么我们现在效果呢，应该是，诶它会打印这个print文件被加载了，诶JS文件被加载了，然后打印那个hello print hello print好。好了，那么我们来看什么呢？诶，我们啊去修改这个print文件啊，修改print文件，比方说这里呢，改成hello。一保存一看效果，诶，你又会发现呢，整个页面被重新刷新了啊，整个页面重新刷新了所有代码呢，重新执行它那是刷新操作。那么这个意思呢，就代表啊，就假设呢，将来我有100个模块啊，那么有100个样式模块。只要我修改其中的某一个模块，整个这200个模块呢，全部要重新打包啊，那这速度呢，可以想象是非常慢的。

那万一呢，将来你的模块都变成1万个，诶，我只修改里面其中的一一个模块代码，结果这1万个全部要重新打包，那这速度呢，可以想象也会更加更加的慢。所以啊，我们想实现什么功能呢？就是啊，如果只有一个模块发生变化，那我按道理只要修改这一个模块代码就足够了，那其他模块呢，理应是不变的。那么要做这个功能，得使用咱们pad的一个功能，叫做HMR功能。好，下面呢，我们就给他做个介绍H8功能。HM叫hot replacement。换句话叫热模块替换。或者叫模块替换。都一个意思啊，它作用呢，就是做我们刚刚所说的事啊，啊一。一个模块发生变化。

更新只会重新打包这个模块。啊，而不是不是打包所有。这样呢，会帮我们极大的。提升。这个构建速度啊，代码的构建速度非常快的提升这个构建速度啊，这个H功能。那么这个HM功能到底怎么使用呢？诶非常简单啊，我们要做的就是将这个这里再加功能啊，它内部支持HM功能，我们。这个这个意思就是开启H功能。不要简单就能开启。好，那么这里要特别注意啊，当我们呢，修改了配置啊，当修改了配置，一定要记得重启PA服务。

那么新配置要想生效？必须重启WiFi服务。啊，所以大家注意，所以这里面呢，我们把程序终止按CTRLCCTRLC，然后输入指定Y啊Y就是终止。然后呢，再输入，再把之前的指令呢，输入一遍啊，按上键回到上一个指令回撤，再输一遍，它就会以最新的代码呢去运行了。好，那么这时候呢，我们开启了HR功能，我们来看一下它跟之前更新会有什么区别。首先打印结果，这里也体现了我们的HR功能呢，已经开启了啊，已经开启了。好，那下面我们来改一改。我再继续去修改一下咱们的样式文件啊，然后改成400。已保存。这时候你会发现呢，他发现诶我的文件发生变化，它只会更新这一个样式文件，而JS文件呢，它并不会被重新下载，诶所以这儿呢，就已经做好了啊，这已经做好了。

那么大家看能很明显看到样式文件发生变化呢，只有样式文件变G没有变，我们可以再演示一遍，再改回来一保存，诶它又只会变这个样式文件，JS呢是不会再变的。而且页面的样式呢，也的确变小了。那么这就是HM功能对样式文件的处理，我们来写一下啊。往下翻啊。样式文件呢，诶。啊，可以。使用这个功能。啊，它之所以能使用啊，是因为啊，因为这个O内部实现了。是因为style内部的内部实现了这个HM功能，会自动的去做，所以我们必须要做了。

啊，这也是为什么我们啊在开发环境呢是用的style，而生产环境呢得提取成单独文件，因为开发环境借助呢，能让我们性能更好，打包速度更快啊，但是上线的时候呢，我们考虑代码的性能优化，所以不能用它。所以这儿呢，我们还是用style的，能让我们使用HR功能，从而的打包速度开发环境下呢，更快一些啊，就是这个。那么样式文件可以，那JS文件行不行呢？我们来测试啊，我们在这个print JS里面的改成代码改成hello print啊一保存好看代码。这个时候你会发现呢，整体页面呢，又被重新刷新了一遍，并没有出现之前的啊一段话啊，说我这个JS呢，被重新下载了，并没有所以。

好，那么我们也可以测试下HH有没有呢？我们可以试一下。H呢，我们。啊，我们比方说啊，多增加一个这个标题呢，我们改一改。看看啊，加个波浪线一把层。好，这时候呢，你会发现呢？他说，Nothing to update。好，H呢，我们发现有个问题，就是当我们开启这个热门化替换呢，它这个，呃，我们的HHAHL呢，文件呢，并没有任何变化，对吧，它没有变化，明明我们加了这个波浪线啊，但是呢，它没有变化。就是H。什么叫热更新呢？就是我们本地写代码，它并没有重新编译，并没有重新刷新浏览器啊，这叫热更新。

那么他并没有做到，那所以呢，我们需要去解决这个问题啊，解决。怎么解决呢，入口呢，要改成一个速度。然后呢，再将这个文件呢，放进来。哎，就可了。好，要改一下entry啊，要修改entry。入口啊，将这个HM文件引入。这个HM功能才能对它生效。好，同样的修改的配置呢，大家一定要记得把服务呢，再重新启动一遍啊，再重新启动一遍。这样呢，我们的配置呢，才能生效。好，前面的换窗口就给关掉了。我们现在呢，就要验证这个功能啊，验证这个功能看行不行。白石没呢，这个波浪线呢，我删掉一保存好，我们看页面的效果，诶这时候呢，它是变化了。啊，但是呢，咱们的HL功能呢，是也是没有这个啊HL功能的，一旦咱们的这个HL文件发生变化，整体页面呢，会全部重新刷新，我们可以再演示一下啊。

加上。整体呢，会全部重新刷新啊。好，所以这里面呢，我们还是要做这个事啊解决呢啊需要这样的解决，需要将HM文件引入，但是呢，他还是使用不了H包功能。那么这里我们就探讨一下啊，就是我们HM文件需不需要HR功能呢？对吧，A乘包括呢，我们叫热模块替换，是一个模块发生变化，哎，只会打包这一个。但是这里我们要注意啊，HM文件呢，对应来讲，它只有一个HM文件，只有一个啊，要注意，所以它正是因为只有一个，所以一旦它发生变化的话呢，它没有其他文件，那需要变化了。所以它只需要变化这一个文件，一旦这个文件变化，那么这一个文件一定要变化，那么既然一定要变化，那我就没办法优化。它不像JS文件一样，我有N个JS模块啊，有N个，其中一个变，那其他的不变，这是正常的。

但是我HP文件只有一个文件啊，我们开发的时候只会创建一个R，一旦变了那就一定要变，没什么理由。所以这个HMHM文件呢，我们在这里啊，是不需要做啊。不用做申报功能。不用做啊，因为他就一个文件不需要再变了，它一旦变了它一定会变啊，不需要再做这个HR功能啊，你做了也是白做。那么JS文件要不要做呢？JS文件得做，诶他怎么做呢？必须要。需要修改JS代码。添加。支持功能的代码。怎么我们来看D，在最下面我们来写一段代码。If moredy hot。

Model their house they accept。好，这个print文件，斜杠print文件。好，这里面跟一个函数。好，那我写的这个代码代表什么含义呢？我们来翻一下啊，If Mo hot，它会去全局找这个Mo这个变量啊，会在当前作找这个Mo变量，然后看model上面有没有一个耗属性。那默认呢，它要么为要么为find没有啊，一旦有就说明一个问题啊。说明开启了功能。说明开启了成本功能，这个时候呢，我们要做的就是哎。让。HR功能代码生效。所以下面代码呢，只有在开启H8功能才有生效，如果没开启就不生效。If什么意思呢，就是。

方法。会监听。这个变化。一旦发生变化。会执行。后面回调函数。所以来到这个函数里面呢，说明我们这个代码发生变化了，我要做事呢，就是把这个代码中的里面的关键性的数再重新执行一次就好了。就是这个。如果你不加这个函数，不加，那么一旦有一个模块发生变化，所有模块都得重新构建，那一旦加上它，它会监听这个JS文件的变化，那这个JS文件发生变化呢？那其他模块呢，就不会再重新打包了啊，其他模块。

就不会去重新打包估计了，哎，会执行后面函数，我们来看效果啊。效果就是我们去改这个prints，比如后面加个小尾巴保存。这时候你会发现呢，他会说这个呢会被重新打包构建啊，会重新更新，但是这个index呢是不会变的啊，Indexs不会变，然后我们的样式和结构呢也不会变。这就是JS文件的任务模块替换功能的使用。我们需要写上如上的这些代码去支持啊。如果将来还有其他模块，继续再写一个这个模块，Host加上模块路径。一旦这个模块发生变化，通过后面的函数来做一些相应的操作啊，来做一些相应操作。那么这样呢，就是模块热替换，模块替换功能呢，我们啊只会针对一些啊非入口文件的JS去做啊。这里面要特别注意，我们来写一下。没注意就是。

就是A包功能的。都能对JS文件来讲。只能处理。啊，非入口JS文件。为什么呢？因为入口文件呢，它会将其他文件全都引入，一旦入口文件变化，那其他文件重新引入，又会重新加载，是没办法阻止的。所以呢啊，入口文件呢，是做不了这个HR功能的，我们只能对入口文件的引入的一些依赖，或者一些其他文件可以做这个H功能，但入口文件呢是做不了的。所以一旦你修改入口文件，那所有都要变，比方说我们就改成A2的一加三一保存，那么所有东西都得重新构建打包，这是没办法的。但是呢，我们可以对入口文件的其他文件做处理，比方说做了这个prints。一旦我改了GS。

它只有这个文件会被重新下载，而其他文件呢，是很不便的。那么这以上呢，就是我们这个开发环境的一个优化啊，优化这个重新打包的一个构建速度，那么这个功能呢，叫做HR功能，它也是我们这个外派呢，提供的一个非常有用功能的之一。啊，那么三种文件呢？我们样式文件通过s staalo以及实现了，所以我们不需要再做任何事，我们只需要保证我们必须要用staalo去处理样式资源。好，JS文件呢，默认是没有这个SM功能的，需要我们修改啊，加上之前的那些代码。那么在处理的时候呢，我们注意咱们入口JS是没办法处理，只能处理非入口JS其他文件。而H文件呢，它默认是也是没有H功能的，同时他也不需要H功能，因为它就一个文件，你对一个文件做没有没有任何意义啊，没有任何。好了，但是一旦我们开启H功能的话呢，H文件就会出个问题，他没办法啊，任何新了。

所以这时候我们修改这个，加上这个，这时候才能更新。好，那么这以上呢，就是我们的H8功能的一个使用。