服务器代码中的 Webpack 热模块替换

Question

到目前为止，我看到的所有 webpack 示例都涉及客户端热模块替换，例如：this 和 this。

根据 webpack 文档，可以使用 webpack-dev-server 或中间件（webpack-dev-webpack-dev-middleware 和 webpack-hot-middleware，以及配置中的 webpack-hot-middleware/client entry，以及集成到例如 express js) 以启用客户端代码的热模块替换

是否可以为服务器端代码启用热模块更换？该文档确实显示了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);
    });
}

该文档的解释相当冗长。

所以问题是，如何在服务器端代码中实现热模块替换而不重新启动服务器？ （目前，我有 nodemon 监视服务器端代码以在文件更改时重新启动服务器）

Answer 1

与 Webpack 捆绑的热重载服务器中间件实际上比热重载客户端捆绑包容易得多，原因有两个：

1. 您不必处理服务器/客户端通信。
2. 中间件几乎总是无状态的，因此您无需担心状态保存。

这意味着您可以忽略与客户端热模块重新加载相关的所有移动部分，例如 WebSockets 以及通过module.hot.accept / module.hot.dispose 教您的代码自我更新。

这是一个例子：

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

如您所见，无需担心状态意味着latestMiddleware 可以简单地引用新的捆绑中间件，而无需编写自定义逻辑来更新依赖图中的其他模块。

顺便说一句，这与 webpack-hot-server-middleware 使用的技术完全相同，唯一的区别是 webpack-hot-server-middleware 更适合在服务器上热重载通用应用程序。

Answer 2

这是一个很好的起点，https://github.com/jlongster/backend-with-webpack。