持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

背景

我们在平常开发项目时可能会遇到这种情况，修改了一下代码，等它生效的话，还得手动再次执行构建，进行打包，然后再手动刷一下页面，才能看到修改后的效果。
我们开发时这种修改代码更新代码是很频繁的，那么每次都需要以上操作才能看到最新的效果，是不是太累了，那么有什么方法可以解放我们的双手呢？
当时是有的，那就是传说中的 热更新 啦。感兴趣的同学们可以看一下，我下面是怎么做的吧。

安装服务之前的效果

这块同学们知道的可以跳过，直接看下面的热更新。我的项目目录：

我的src/index.js代码是这样的：

执行构建，最后的页面效果：

现我给代码最后一行添加一行打印代码：

页面效果呢，如果我没有进行任何操作的话，它依旧是没有任何变化的，如下。

所以，我需要再次执行构建，然后再刷新一个页面才可以更新，
最后，我再次执行了构建：
npm run test
这个构建的命令也是在package.json里面去配置定义的，这里还想了解的同学可以翻看我webpack专栏的其他讲这块的文章。构建成功后再重新打开dist/index.html文件，才能看到页面效果更新了：

下面我们看一下热更新怎么解决的。

热更新

本地开启一个服务

首先安装一个本地的服务：
npm install webpack-dev-server
这里我用的版本是3.11.3，这里注意有时候跑不起来或者报错，可以看下安装的webpack一系列的版本是否不匹配或者不稳定，小的版本号差异不大，就看大的版本改动。
我的webpack的版本是4.44.1，webpack-cli的版本是3.3.12 。

配置（定义命令）

服务安装好了之后，我们去package.json中去再配置一下，去定一个命令去跑这个服务。配置如下：
package.json:

我是这样配置的，定义的命令式server,意思执行npm run server这个命令，我们安装的webpack-dev-server服务就跑起来啦。

服务跑起来

执行命令，让服务跑起来：

npm run server

成功后，如下：

可以看到里面的所有的出口文件，以及项目的地址是 http://localhost:8081
直接点击地址，可以看到页面是没问题的

dist目录空啦

嗯。。。。是没毛病，但是dist目录里面空了？！但我们可以看到dist里面明明是有文件的。

这是为什么呢？怎么就空了呢？
这是 因为devServer把打包后的模块不会放在dist下，而是放在内存中，从而提升速度。

http://localhost:8081 其实指的是服务的根目录，dist就是服务里面的/，我的01.jpg图片文件, 本来它的路径是这样的dist/images/01.jpg, 现在服务上的路径应该是这样的/images/01.jpg；
我们试一下看这样的路径，图片是否能够正常显示：