This will also mean that if your module has side effects, such as starting a server, then monkey-hot-loader won't work that well with it. That won't be the case if there is a global state, but there really shouldn't be one if it's coded correctly. 

Also, note that when we change a module by taking monkey-patch and patch the original module with the updates.

In this section, we will explore how patching top-level functions works in detail.

monkey-hot-loader is a Webpack loader that parses the JavaScript file and extracts all the names of the top-level functions in the file:

1. For example, take a look at the following code, which we are placing in the app.js file but can be placed anywhere, as the code works globally and will affect top-level functions:

function foo() {
  return 5;
}
function bar() {
  return function() {
  // ...
 }
}
module.exports = function() {
 // ...
}

In respect to the previous example, the latest version of monkey-hot-loader currently only extracts the function names foo and bar, as only these functions can be patched. A few other types of functions could be made patchable, but let's keep things simple for now for the sake of explanation.

The foo and bar functions can be patched by setting them to new functions. This is because they are top-level functions. When updated, the functions will be created in the same scope. It's then easy to inject new code there.

There is only one real problem with that, concerning exporting the function: modules using the exported function would still be referencing the old variation. Quite a bit of work needs to be done to get around that, which we will go over now.

The names of these functions are given to the runtime code that monkey-hot-loader appends to each module.

2. When the module runs initially, it will iterate over these names and make each function patchable, and we do this by replacing it with the following code:

var patched = function() {
 if(patchedBindings[binding]) {
  return patchedBindings[binding].apply(this, arguments);
 }
 else {
  return f.apply(this, arguments);
 }
};
 patched.prototype = f.prototype;

Here, the f variable would reference the name foo if we were patching it. Note that the semantics of patched should be the same as the f variable. Any call to the patched variable should produce the same result as a call to f. 

With the initial semantics of foo intact, we have installed a "hook" to perform a check to see whether there's a new version of the function to call. After all top-level functions are replaced with this variation, we can simply override any of them by loading a function into patchedBindings. Even exported functions will call the new variation.

Currently, the monkey-hot-loader implements this top-level function patching as an initial experiment. You may consider playing with it by using the backend-with-webpack project to see how to integrate it with your application.

Depending on the context, a different heuristic may need to be adopted for patching. For instance, if your frontend uses React, most of your code will exist inside the React library components. The react-hot-loader works fantastically well for that. However, concerning your backend code, most of it might be classed with methods, in which case patching the method on the prototype works best for that.