Question

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

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

是否可以为服务器端代码启用热模块更换？该文档确实显示了example

entry

该文件非常简洁。

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

Answer 1

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

您不必处理服务器/客户端通信。
中间件几乎总是无国籍，所以你不需要关心国家保护。

这意味着您可以忽略与客户端热模块重新加载相关的所有移动部件，例如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可以简单地引用新的捆绑中间件，而无需编写自定义逻辑来更新依赖关系图中的其他模块。 / p>

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

Webpack热模块替换服务器代码

1 个答案: