Jlongster, who wrote the blog before, ignored me. I also don’t know the contact information of the Webpack author. At last, he seems to have seen the message sent on Gitter. Just one cursory explanation, and it hit me… Github.com/webpack/doc…

Here is the process in short:

  • Compile the server code with webpack

  • Use target: “node” or target: “async-node”

  • Enabled HMR via --hot or HotModuleReplacementPlugin

  • Use webpack/hot/poll or webpack/hot/signal

  • The first polls the fs for updates (easy to use)

  • The second listens for a process event to check for updates (you need a way to send the signal)

  • Run the bundle with node.

You can’t use existing HMR loaders like react-hot-loader or style-loader because they make no sense in a server environment. Just add manuall replacement code at the correct location (i. e. accept request handler like in the example)

You can’t use the webpack-dev-server. It’s a server which serves assets not a runner. Just run webpack –watch and node bundle.js. I would go the webpack/hot/poll? 1000 route first. It’s pretty easy to use and suitable for dev environments. For production (if you want to hot update your production server) the signal approach is better suited.

After understanding the main is how Webpack configuration and script how to run I wrote again, the code is only so short, hot replacement is realized: github.com/jiyinyiyong… The code can be copied from jlongster’s configuration tutorial: jlongster.com/Backend-App…

webpack = require 'webpack' module.exports = entry: ['webpack/hot/poll?1000' # <-- poll code './ SRC /main' # <-- poll code] Module: loaders: [{test: /\. Coffee /, loader: 'coffee'}] plugins: [new webpack HotModuleReplacementPlugin () # < -- start as usual hot mode] resolve: extensions: [' js', ' 'and' coffee ']Copy the code

In the command line environment, note that it is webpack, not webpack-dev-server. Note that it is running in the background & just to avoid blocking, if you have two terminals open two

NPM I webpack --watch & # <-- Watch mode node build/bundle.js # <-- run the code to package the resultCopy the code

I wrote two test files, one with modified code SRC /lib.coffee:

exports.data = 'code 5'

exports.printSelf = ->
  console.log 'doing 3'Copy the code

Another entry file, SRC /main.coffee, contains code to handle module replacement:

lib = require './lib' console.log lib.data lib.printSelf() counter = 0 setInterval -> counter += 1 console.log counter ,  2000 if module.hot module.hot.accept './lib', -> lib = require './lib' console.log lib.data lib.printSelf()Copy the code

Run a Demo to see how this works. SetInterval is not disturbed by replacement, and every change in the build/ directory generates a JSON file recording the changes:

➤ ➤ build / 0.1 l dadeb2eb7b01e150126. Hot - update. Js 0. C1d0d73de39660806d0c. Hot - update. Js 2849 b61a15d31ffe5e08. Hot - update. 0.99 ea3ea7633f6b3750e6 json. Hot - update. Js 0. Eaa7b323eba37ae58997. Hot - update. Js 9 b4a5ad617ec1dbc48a3. Hot - update. Json fb584971920454f9ccbe. Hot - update. 0.9 abf25005c61357a0ce5 json. Hot - update. Js 0. Fb584971920454f9ccbe. Hot - update. Js a664b5851a99ac0865ca. Hot - update. 0.9 b4a5ad617ec1dbc48a3 json. Hot - update. Js 1dadeb2eb7b01e150126.hot-update.json bundle.js 0.a664b5851a99ac0865ca.hot-update.js 256267122c6d325755b0.hot-update.json  c1d0d73de39660806d0c.hot-update.jsonCopy the code

The content of the file looks like this, which can be thought of as containing the information needed to identify the update:

➤ ➤ cat build / 0. C797c084381bfeac37f7. Hot - update. Js exports. The id = 0; exports.modules = { /***/ 3: /***/ function(module, exports, __webpack_require__) { var counter, lib; lib = __webpack_require__(4); console.log(lib.data); lib.printSelf(); counter = 0; setInterval(function() { counter += 1; return console.log(counter, 3); }, 2000); if (true) { module.hot.accept(4, function() { lib = __webpack_require__(4); console.log(lib.data); return lib.printSelf(); }); } / / * * *}};Copy the code

Other options

During the day on the Internet to find the scheme, incidentally in the forum made a post to ask this thing ready-made two main explanation more clear scheme, worth learning

A technique is baidu blog, write about how to do processing module object, which is the manual monitoring file modification, and then clear module cache, to mount the module think clearly consider carefully, though a bit redundant code, or you can try: fex.baidu.com/blog/2015/0…

The other seems to hack the require.extensions, adding actions and events to the module that automatically updates when the module file is updated, and emit an event. Using new code this should be said to be relatively crude, after all, not all code is easy to replace github.com/rlidwka/nod…

feeling

Given that I’m already tied to Webpack, I’m not going to delve into it. Maybe node.js will make some improvements to lib/module.js. However, JavaScript is not an immutable data usage community. There are three solutions for you to choose from: Node-Dev Supervisor Nodemon, which is not as easy as Erlang’s status update because of code replacement

For me, the main thing is that the Cumulo solution relies heavily on WebSocket. Now front-end development can update the code on the server and update the client automatically. Through Webpack and React, Local update of DOM and pure function modules if the development environment can also be hot replacement, this is a huge improvement in development efficiency. Originally thought that hot replacement is unreachable, but it is likely to be within reach of efficiency improvement!

There may be a hole in the back, after all, black technology… Once again, if you are interested, you can take a closer look at several related works of God written by Jlongster, which is very helpful: jlongster.com/archive