How to HMR on server side?

[tiye]

It's mentioned on in the docs that Webpack also does HMR to server code, but how? Please can you add more details?
https://github.com/webpack/docs/wiki/hot-module-replacement

---

Updated:

Minimal example https://github.com/minimal-xyz/minimal-webpack-nodejs-hmr

[sokra]

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)

[tiye]

So the bundled code is still run with node and it connects to webpack-dev-server listening for updates via webpack/hot/signal like...

var backendConfig = config({
  entry: [
    'webpack/hot/signal.js',
    './src/main.js'
  ],
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  },
  node: {
    __dirname: true,
    __filename: true
  },
  externals: nodeModules,
  recordsPath: path.join(__dirname, 'build/_records'),
  plugins: [
    new webpack.IgnorePlugin(/\.(css|less)$/),
    new webpack.BannerPlugin('require("source-map-support").install();',
                             { raw: true, entryOnly: false }),
    new webpack.HotModuleReplacementPlugin({ quiet: true })
  ]
});

And in @jlongster 's configs nodemon is actually useless since Webpack will reload code internally...
https://github.com/jlongster/backend-with-webpack/blob/master/gulpfile.js

gulp.task('run', ['backend-watch', 'frontend-watch'], function() {
  nodemon({
    execMap: {
      js: 'node'
    },
    script: path.join(__dirname, 'build/backend'),
    ignore: ['*'],
    watch: ['foo/'],
    ext: 'noop'
  }).on('restart', function() {
    console.log('Patched!');
  });
});

It all makes sense now.. Thanks for replying.

[sokra]

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.

[tiye]

I'm quite confused on webpack --watch. I thought it's unlike dev-server and will compile the whole bundle on every update. How does Webpack know which modules are updated then?

[sokra]

filesystem watcher. The same as the webpack-dev-server.

[tiye]

Feeling much better when I finally got it up and running.
https://github.com/jiyinyiyong/webpack-backend-HMR-demo

[tiye]

I heard someone talking about memory leaks in hot swapping system built on top of Node.js . Does Webpack fixed such issues?

[sokra]

I heard someone talking about memory leaks in hot swapping system built on top of Node.js . Does Webpack fixed such issues?

I don't know about issues.

[tiye]

Thanks anyway.

[particle4dev]

@jiyinyiyong great demo, thanks!

[avocadowastaken]

@jiyinyiyong just tried your example with webpack 2, works like charm, great development experience with just one tool

[laurenskling]

I'm getting:

[HMR] Cannot apply update.
[HMR] Error: Aborted because 6 is not accepted
    at hotApply (/Library/WebServer/Documents/nondejus.nl/build/backend.js:343:31)
    at hotUpdateDownloaded (/Library/WebServer/Documents/nondejus.nl/build/backend.js:256:13)
    at hotAddUpdateChunk (/Library/WebServer/Documents/nondejus.nl/build/backend.js:236:13)
    at hotDownloadUpdateChunk (/Library/WebServer/Documents/nondejus.nl/build/backend.js:5:12)
    at hotEnsureUpdateChunk (/Library/WebServer/Documents/nondejus.nl/build/backend.js:246:13)
    at /Library/WebServer/Documents/nondejus.nl/build/backend.js:218:14
    at hotDownloadManifest (/Library/WebServer/Documents/nondejus.nl/build/backend.js:14:12)
    at Object.hotCheck [as check] (/Library/WebServer/Documents/nondejus.nl/build/backend.js:197:12)
    at Timeout.checkForUpdate [as _repeat] (/Library/WebServer/Documents/nondejus.nl/build/backend.js:556:16)
    at Timeout.wrapper [as _onTimeout] (timers.js:417:11)

[HMR] You need to restart the application!

my config is like yours, here it is:

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  context: path.join(__dirname),

  entry: [
    'webpack/hot/poll?1000',
    './preprocessor.js',
  ],

  target: 'node',

  node: {
    __dirname: true,
    __filename: true,
  },

  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  },

  externals: nodeModules,

  resolve: {
    root: [
      path.resolve(__dirname),
    ],
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js'],
  },

  plugins: [
    new webpack.IgnorePlugin(/\.(css|less)$/),
    new webpack.BannerPlugin(
      'require("source-map-support").install();',
      { raw: true, entryOnly: false }
    ),
    new webpack.HotModuleReplacementPlugin(),
  ],

  module: {
        loaders: [
        {
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            loaders: ['babel'],
        },
    ],
  },
};

any ideas?