Webpack implement Node.js code hot swap _node.js

Source: Internet
Author: User
Tags setinterval

These two days to this question, Gitter asked, Twitter asked, GitHub asked, two days did not respond
Original blog Jlongster ignore me, I do not know Webpack author's contact information
Last message sent on the Gitter He seemed to see it, and he explained it in a rough way.
Https://github.com/webpack/docs/issues/45

 Here's the process in Short:compile the server code and Webpack use target: "Node" or Targe T: "Async-node" Enabled HMR via--hot or hotmodulereplacementplugin use Webpack/hot/poll or webpack/hot/signal the Olls the FS for updates (easy to use) the second listens for a process event to check for updates (your need a way to send
The signal) Run the bundle with node. Can ' t use existing HMR loaders like React-hot-loader or style-loader because they make no sense in a server environmen  T. Just add Manuall replacement code at the correct location (I. E. Accept request Handler like in the example) 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. It ' s pretty easy to use and suitable for dev environments.

For production (if you are want to hot update your production server) The signal approach is better suited. 

The words are not translated, after understanding the main is webpack how to configure and how to run the script
I wrote it again, the code was just so short that the hot swap was realized:
Https://github.com/jiyinyiyong/webpack-backend-HMR-demo
Where the code can be copied from the Jlongster configuration tutorial:
Http://jlongster.com/Backend-Apps-with-Webpack--Part-II

Webpack = Require ' webpack '

module.exports =
 entry: [
  ' webpack/hot/poll?1000 ' # <--poll code for updated content
  './ Src/main ' # <--entry
 ]
 target: ' node ' # <--indicates that the compilation is node
 output:
  path: ' build/'
  filename: ' Bundle.js ' # <--file name for compilation results
 module:
  loaders: [
   {test:/\.coffee/, loader: ' Coffee '}
  ]
 Plugins: [
  new Webpack. Hotmodulereplacementplugin () # <--starts hot mode as
 usual
 resolve:
  extensions: ['. js ', ', '. Coffee ']

If the command line environment is running, note that it is webpack, not webpack-dev-server.
Note that the background running & just to not block, you have two terminals open two

NPM i
webpack--watch & # <--Watch mode
node Build/bundle.js # <--is running code to package the results

I wrote two test files, one is the code that will be modified Src/lib.coffee:

Exports.data = ' Code 5 '

exports.printself =->
 console.log ' doing 3 '

Another entry file, Src/main.coffee, contains code for processing module substitution:

lib = Require './lib '

console.log lib.data
lib.printself ()

counter = 0
setinterval-> counter
 + = 1
 console.log counter
,

if Module.hot
 module.hot.accept './lib ',->
  lib = Require '. /lib '

  console.log lib.data
  lib.printself ()

Running a Demo, you know how the effect, SetInterval is not replaced by interference
In the build/directory, each modification generates a JSON file to record the modified content:

Copy Code code as follows:
➤➤l build/
0.1dadeb2eb7b01e150126.hot-update.js 0.c1d0d73de39660806d0c.hot-update.js 2849b61a15d31ffe5e08.hot-update.json  0.99ea3ea7633f6b3750e6.hot-update.js 0.eaa7b323eba37ae58997.hot-update.js 9b4a5ad617ec1dbc48a3.hot-update.json Fb584971920454f9ccbe.hot-update.json
0.9abf25005c61357a0ce5.hot-update.js 0.fb584971920454f9ccbe.hot-update.js A664b5851a99ac0865ca.hot-update.json
0.9b4a5ad617ec1dbc48a3.hot-update.js 1dadeb2eb7b01e150126.hot-update.json Bundle.js
0.a664b5851a99ac0865ca.hot-update.js 256267122c6d325755b0.hot-update.json C1d0d73de39660806d0c.hot-update.json

The exact contents of the file are as follows: the information that is needed to identify the update is generally considered to be included.

➤➤cat build/0.c797c084381bfeac37f7.hot-update.js
exports.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);
  }, Watts);

  if (true) {
   module.hot.accept (4, function () {
    lib = __webpack_require__ (4);
    Console.log (lib.data);
    return lib.printself ();}
   );

/***/ }
};

Other programmes

During the day on the Internet to find a solution, by the way in the forum posted a post to ask this thing, ready-made two of the main instructions more clear plan, it is worth learning from

One is Baidu's technology blog, write about how the module object to do processing, that is, manual monitoring file modifications, and then clear module cache, Reload module
Thinking clearly and carefully, although a bit redundant code, or you can try:
Http://www.jb51.net/article/73739.htm

Another seems to be doing hack to require.extensions, adding operations and events, when the module file is updated, the corresponding module is automatically updated, and emit an event, through this effect, the location of the module reference can do some processing, using the new code, This should be said or relatively rough, after all, not all the code is easy to replace
Https://github.com/rlidwka/node-hotswap

Feelings

Considering that I have been hanged in webpack this tree, also do not intend to delve into, perhaps Node.js official lib/module.js do optimization can make good function to, however, JavaScript after all is not immutable data use the wind community, than Erlang , because the code substitution is related to the problem of state update, it is not easy to restart, and restart now have Node-dev Supervisor Nodemon three sets of options you choose

For me, the main cumulo scheme has a huge dependence on the WebSocket, now front-end development has been able to do the server update code, the client automatically updated,
Through the mechanism of webpack and react, local update DOM and pure function module, if the development environment can also be hot replacement, this for the development of the efficiency of the promotion is too big, originally feel hot replacement unreachable, but it is likely to be within reach of the efficiency improvement!

There is probably a hole in the back, black technology after all ... I met you again.

Interested can look at the Jlongster wrote a few related to God, very helpful:
Http://jlongster.com/archive

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.