学习笔记之 webpack 热更新原理以及配置方式

webpack 热更新配置方式一, mode:设置为devlepmemt,然后加入plugins,devServer配置;

热更新配置方式二(更灵活的方式,使用middleWare插件),通过编程方式,可以更灵活的配置项目启动

如:项目启动前,注入一些变量,动态生成一些文件,调整一些参数等.

学习笔记之 webpack 热更新原理以及配置方式

备注一些理解:

首次运行阶段走的路线为 1 -> 2 -> A ->B

当文件发生变化后, 走的路线为 1 -> 2 ->3 ->4

理解:首次运行会开启一个本地服务端 Webpack Dev Server,(localhost:xxxx),然后打开浏览器后, 浏览器会访问这个项目地址,

项目里bundle.js 会包含 HMR Runtime ,然后 HMR Runtime 会时时监听或通过websocket长连接方式与服务端的HMR Server发生通讯. HMR Server发生消息通知后,HMR Runtime会根据通知内容,动态改变浏览器展示的内容!

具体的如果修改浏览器内容的,暂时不清楚,希望后期能知道!

学习笔记 之 webpack 热更新原理 以及配置方式