To get straight to the point, here is the repository location:
Introduction#
When using hot reload technology with webpack, it usually requires webpack-dev-server or webpack-hot-middleware to be used in conjunction with express or koa to enable hot reload functionality.
However, this is not fair for large scale projects because websites serving large scale projects typically use their own methods to serve the entire website, such as nginx or apache.
Using webpack-dev-server with this large scale solution can be very troublesome. This is why webpack-hot-socketio was created.
But in order to enable the hot reload effect, we still need to enable a socket.io server. For more details, please refer to the example in https://github.com/gcaaa31928/webpack-hot-socketio
Technical Insights#
There isn't really any secret. It's just taking webpack-hot-middleware and making some modifications. Originally, webpack-hot-middleware used server-sent events to achieve the effect of sending events from the server. For more details, please refer to https://developer.mozilla.org/zh-TW/docs/Web/API/Server-sent_events/Using_server-sent_events
On the other hand, webpack-hot-socketio uses socket.io to achieve the effect of sending events from the server. During the process, there were many issues encountered, such as when the socket.io server restarts, it would cause unnecessary hot update.json to be sent, making the webpage think that it did not receive the updated hot update hash and causing recursive crashes. This is when it becomes very important to understand the code of hot modules QQ.
Precautions#
Since the host location is different from the host or port of the socket.io server, there is a high possibility of encountering CORS issues. In this case, you need to allow headers on your own server.
Miscellaneous Notes#
Understanding webpack compile is really not easy. From tapable to various hooks, it takes a lot of time to properly integrate plugins, and usually, this type of webpack plugin requires frequent investigation to ensure that there are no issues.
Conclusion#
If your project is in an awkward situation, as mentioned earlier, being a large website where it is not easy to use webpack-hot-middleware or webpack-dev-server to make the website work, then perhaps webpack-hot-socketio is your salvation QQ