nodejs库【Webpack Hot Server Middleware】

最新推荐文章于 2023-03-19 15:03:19 发布

原创最新推荐文章于 2023-03-19 15:03:19 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

nodejs 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨Webpack热服务器中间件的功能与应用，该中间件旨在实现服务器端Webpack捆绑包的实时更新，无需重启服务器即可查看最新更改。通过与WebpackDev中间件及热模块替换配合使用，可显著提升开发效率，尤其是在创建通用Web应用程序时。文章还提供了具体的配置示例，展示了如何将此中间件集成到Express服务器中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

Webpack热服务器中间件设计为与Webpack Dev中间件（以及可选的Webpack热中间件）一起使用，以在服务器上热更新Webpack捆绑包。

为什么？
创建通用Web应用程序时，通常使用Webpack构建两个捆绑包，一个客户端捆绑包针对“web”，另一个服务器捆绑包针对“node”。

客户端包的入口点呈现到DOM

注意：服务器包本身就是中间件，允许您将其安装到现有节点服务器的任何位置，例如

考虑到这种设置，使用Webpack Dev Server或Webpack热中间件为客户端包连接热模块替换相当容易，但是这些中间软件不处理服务器包，这意味着您需要经常重新启动服务器以查看最新的更改。

Webpack热服务器中间件解决了这个问题，确保使用的服务器包始终是最新的编译，而不需要重新启动。此外，它还允许客户机和服务器捆绑包共享相同的Webpack缓存以更快地构建，并在服务器上使用内存捆绑包以避免触及磁盘。

事实证明，在服务器上，热模块替换比在客户机上要容易得多，因为您没有任何要保留的状态，因为中间件几乎总是必须是无状态的，所以只要发生更改，就可以在顶层替换整个包。

用法

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackHotServerMiddleware = require('webpack-hot-server-middleware');
const config = require('./webpack.config.js');
const app = express();
 
const compiler = webpack(config);
 
app.use(webpackDevMiddleware(compiler, {
  serverSideRender: true
}));
// NOTE: Only the client bundle needs to be passed to `webpack-hot-middleware`.
app.use(webpackHotMiddleware(compiler.compilers.find(compiler => compiler.name === 'client')));
app.use(webpackHotServerMiddleware(compiler));
 
app.listen(6060);