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?