0

I have been using webpack hot reload in development and it is awesome. It saves me a lot of time. I have been searching over the web today to get a good grasp of how it actually works and have not found any good explanation about the internal working of it. So, I am asking here to get a good understanding of how it actually works.

I have come a bit in my mini hot reload project. For now, I have set up a node server and a simple client side Javascript code. The client is connected to the server via websocket and the server fires change events to client based on fs.watch function from node.jsthat watched my code folder for every file change.

I am stuck at how I can patch the update I recieve from server in client code. Right now, I have just index.js file in index.html. So I am wondering how bundling tools like webpack achieves hot reload, specifically how they patch the update.

I've read from webpack docs that they have a thin hrm runtime in client code that update the patch, but I could not seem to find any detailed info on how they achieve this feat. Do they open the client index.js file using FileReader, read the file and write(?) back? Again, I do not have a clear understanding of how this works. So, if you guys could give me some direction, I could dig deeper into it.

So my question is, how do they patch(insert) the new code into the already existing client code which resides in index.js?

notQ
  • 229
  • 3
  • 14
  • That is tricky and flaky, i'm fighting to find a better solution to do this too. https://github.com/webpack/webpack/blob/master/lib/HotModuleReplacement.runtime.js this is the code that lives on the browser. https://github.com/webpack/webpack/blob/master/lib/HotModuleReplacementPlugin.js this is what controls the updates too – PlayMa256 Nov 20 '18 at 11:18
  • @PlayMa256 I have looked through that code yesterday and find nothing specifically about how they patch the update. Do you have a clue on how it happens inside that code that lives in the browser? – notQ Nov 20 '18 at 11:21
  • it stats on line 547 i suppose. it plays with `module` and also with the array of installed modules (aka webpackjsonp) on the browser. – PlayMa256 Nov 20 '18 at 11:39
  • If you not tied to the `webpack-hot-middleware` an alternative could be the [webpack-hot-client](https://github.com/webpack-contrib/webpack-hot-client) which uses [more recent technologies](https://github.com/webpack-contrib/webpack-hot-client/issues/18) and IMO easier to configure, and follow what it does and how. – lependu Nov 20 '18 at 11:58
  • @lependu I want to code myself this up since we do not use webpack in our project. From my reading, webpack-hot-client is closely tied to webpack itself. ```In order to use webpack-hot-client, your webpack config should include an entry option that is set to an Array of String..``` – notQ Nov 20 '18 at 12:08

0 Answers0