Austausch des Webpack-Hot-Moduls im Servercode

Question

Alle bisher beschriebenen Webpack-Beispiele beziehen sich auf den Austausch von Client-seitigen Hot-Modulen, zum Beispiel: this und this.

Gemäß dem webpack Dokument kann man entweder webpack-dev-Server oder Middleware (webpack-dev-webpack-dev-Middleware und webpack-hot-Middleware, zusammen mit webpack-hot-middleware/client in einer Config entry und integrierte in zB Verwendung express js), um den Austausch von Hot-Modulen für clientseitige Codes zu aktivieren

Ist es möglich, den Austausch von Hot-Modulen für serverseitige Codes zu aktivieren? Das Dokument zeigt eine 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); 
    }); 
} 

Das Dokument in Erklärung recht Ersatz ist.

Die Frage ist also, wie Hot-Modul-Ersatz in serverseitigen Code ohne Neustart des Servers implementiert werden könnte? (Im Moment, ich habe nodemon Server-seitigen Code gerade die Server auf Dateiänderungen neu zu starten)

Answer 1

Dies ist ein guter Ausgangspunkt sein kann, https://github.com/jlongster/backend-with-webpack.

Answer 2

Hot Nachladen Server Middleware mit Webpack gebündelt ist eigentlich viel einfacher als heißes Nachladen Client-Seite Bündel aus zwei Gründen:

1. Sie müssen nicht Client/Server-Kommunikation behandeln.
2. Middleware ist fast immer notwendigerweise zustandslos, so dass Sie sich nicht um die Erhaltung des Zustands kümmern müssen.

Dies bedeutet, dass Sie mit Client-Seite Hot-Module Nachladen wie WebSockets sowie Unterricht Code selbst zu aktualisieren durch module.hot.accept/module.hot.dispose assoziiert alle beweglichen Teile ignorieren können.

Hier ist ein Beispiel:

// ./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); 

Wie Sie die Tatsache sehen, dass kein Staat gibt es etwa bedeutet, dass die latestMiddleware kann einfach die neue gebündelt Middleware Referenz zu sorgen, ohne eigene Logik schreiben um andere Module im Abhängigkeitsgraphen zu aktualisieren.

Übrigens ist dies die exakt gleiche Technik, die von verwendet wird, der einzige Unterschied ist Webpack-Hot-Server-Middleware ist mehr auf das heiße Nachladen von universellen Anwendungen auf dem Server ausgerichtet.