与 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
可以简单地引用新的捆绑中间件,而无需编写自定义逻辑来更新依赖关系图中的其他模块。
顺便说一句,这与webpack-hot-server-middleware https://github.com/60frames/webpack-hot-server-middleware,唯一的区别是 webpack-hot-server-middleware 更适合服务器上的热重载通用应用程序。