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 usually have their own way of serving the entire website, such as nginx or apache.
It is quite troublesome to use webpack-dev-server with this large scale solution, which 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 a modification of webpack-hot-middleware. 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/en-US/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 sending out redundant hot update.json files when the socket.io server restarts, causing the webpage to recursively crash because it thinks it hasn't received the updated hot update hash. This is when it becomes very important to understand the code of hot modules.
Important Notes#
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 will need to allow headers on your own server.
Miscellaneous#
Understanding webpack compile is really not easy. From tapable to various hooks, it takes a lot of time to properly integrate plugins, and usually, these webpack plugins require frequent investigation to ensure that there are no issues.
Conclusion#
If your project is in a difficult situation, as mentioned earlier, where it is a large website and cannot easily use webpack-hot-middleware or webpack-dev-server to make the website work, then webpack-hot-socketio may be your salvation.