通过socket.io实现webpack中的HMR

HMR 即 Hot Module Replacement 是 Webpack 一个重要的功能。

它可以使我们不用通过手动地刷新浏览器页面实现将我们的更新代码实时应用到当前页面中。

开发过微信小程序的同学应该并不陌生，当你修改完代码Ctrl＋S的时候视图会立刻更新到修改后的样子

告别f5的日子真的是爽的不亦乐乎，

鉴于web开发中hmr对我们如此的有帮助鹏叔今天发文来帮助初学者解决hmr的问题

查阅过资料的同学应该发现了，有关hmr的资料介绍的少之又少，并且各种片段的配置方式让我们琢磨不透

这里面最多应用的是

webpack hot middleware

这个中间件来实现的。

那么，如果我们把思路反过来，

之前的文章有介绍webpack的watch模式

这个模式可以实现在保存文件的时候直接编译我们src文件夹下的js，css，tpl等内容并且生成新的文件

如果这个时候brower端有一个listener捕获到我们的更新并且及时的刷新了页面，那么与hmr的效果就完全一样了

所以问题来了，

靠什么来解决监听连接的问题呢？

ajax？他能实现，但是ajax只能主动从b端向s端发送请求，服务端无法主动通知b端

那么，我们可以使用websocket技术来实现服务端主动发送信息

所以，还是上代码吧

首先我们仍然要搭建一个 express+webpack的项目本期不不引用JQ bootstrap等内容了

项目结构如下：

webpack的配置文件是这样的

不同的地方在于webpack的配置文件不再写到app.js中，我们这次直接写在www文件中

并且在他的上面先引入 socket.io

然后在tpl下的index.html中直接引用客户端的socket.io

main.js中插入下面的代码

ok全部工作准备完毕之后我们直接去启动express服务器

npm start

访问http://localhost:3000/

现在是空白页

那么我们在index.html中输入点内容 然后保存一下

在css中再试试

看结果吧

我们通过socket.io

实现了hmr

这种配置方式适合新手，并且操作很灵活，可以封装成插件

不需要引入一大堆的js库来实现

多动手，多思考

相信会对同学们有帮助

关于websocket的介绍，后期的文章我会继续发出新手扫盲入坑文章的，欢迎持续关注