到目前为止,我看到的所有 webpack 示例都涉及客户端热模块替换,例如:this和 this .
根据 webpack 文档,可以在配置 webpack-hot-middleware/client
中使用 webpack-dev-server 或中间件(webpack-dev-webpack-dev-middleware 和 webpack-hot-middleware,以及 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 监视服务器端代码以在文件更改时重新启动服务器)
最佳答案
与 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
使用的技术完全相同。 ,唯一的区别是 webpack-hot-server-middleware 更适合在服务器上热重载通用应用程序。
关于服务器代码中的 Webpack 热模块替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34101783/