Replacing a hot Webpack module with server code

Question

All examples of web packages that I looked at now relate to replacing a hot module on the client side, for example: this and this .

According to the webpack document, you can use the EEPER webpack-dev-server OR middlewares (webpack-dev-webpack-dev-middleware and webpack-hot-middleware together with webpack-hot-middleware/client in the config entry and are integrated, for example, in express js) to enable hot swapping of modules for client codes

Is it possible to enable module hot swapping for server codes? This document shows an example.

 var requestHandler = require("./handler.js"); var server = require("http").createServer(); server.on("request", requestHandler); server.listen(8080); // check if HMR is enabled if(module.hot) { // accept update of dependency module.hot.accept("./handler.js", function() { // replace request handler of server server.removeListener("request", requestHandler); requestHandler = require("./handler.js"); server.on("request", requestHandler); }); } 

The document is quite important for explanation.

So, the question is, how will the module be hot-swapped in server code without restarting the server? (At the moment, I have nodemon observing the server code to restart the server when the file changes)

Answer 1

The hot reboot server middleware bundled with Webpack is actually much simpler than hot reloading packages on the client side for two reasons:

• You do not need to handle communication between the server and the client.
• Middleware is almost always stateless, so you don’t have to worry about maintaining state.

This means that you can ignore all the moving parts associated with reloading hot modules on the client side, such as WebSockets, as well as teaching your code to update through module.hot.accept / module.hot.dispose .

Here is an example:

 // ./src/middleware.js module.exports = (req, res) => { res.send('Hello World'); }; 

 // webpack.config.js const path = require('path'); module.exports = { target: 'node', entry: './src/middleware.js', output: { path: path.join(__dirname, './dist'), filename: 'middleware.js', libraryTarget: 'commonjs2' } }; 

 // ./src/index.js const express = require('express'); const config = require('webpack.config.js'); const app = express(); const queue = []; let latestMiddleware; webpack(config).watch(() => { // re-require new middleware delete require.cache[require.resolve('./dist/middleware.js')] latestMiddleware = require('./dist/middleware.js'); // pass buffered requests to latestMiddleware while (queue.length) latestMiddleware.apply(void 0, queue.shift()); }); app.use((req, res, next) => { if (latestMiddleware) { latestMiddleware(req, res, next); return; } queue.push([req, res, next]); }); app.listen(6060); 

As you can see that there is no state to worry about, it means that latestMiddleware can simply reference the new middleware without having to write its own logic to update other modules in the dependency graph.

By the way, this is the same method used by webpack-hot-server-middleware , the only difference is that webpack-hot-server-middleware is more oriented towards hot reloading of universal applications on the server.

Answer 2

This could be a good starting point, https://github.com/jlongster/backend-with-webpack .