如何结合vue-server-renderer与vue-router配置webpack-hot-server-middleware？

嘿，我之前搭建Express+Webpack的SSR+HMR项目时，也栽过webpack-hot-server-middleware的坑，刚好能帮你理清正确的实现方式！这个中间件的核心逻辑是动态加载最新的server bundle，并从中获取处理SSR的Express中间件，不是直接让你传(req,res,next)的函数，下面结合你的配置文件一步步调整：

1. 先调整webpack.config.js的关键配置 #

确保多入口、node环境目标和commonjs导出格式，同时开启HMR插件：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    // client入口要加webpack-hot-middleware的client端脚本
    client: ['./src/entry_client.js', 'webpack-hot-middleware/client?reload=true'],
    server: './src/entry_server.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2', // 让server bundle能被Node.js require
    publicPath: '/'
  },
  target: 'node', // 告诉Webpack server入口是给Node环境用的
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin() // 编译出错时不输出，避免热更新崩溃
  ],
  module: {
    rules: [
      // 你的babel、css等loader配置，注意server端css可以用null-loader跳过处理
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

2. 修改entry_server.js，导出中间件创建函数 #

这个文件必须导出一个返回Express中间件的函数，而不是直接导出中间件——因为热更新时需要重新生成最新的SSR逻辑：

import express from 'express';
import { renderToString } from 'react-dom/server'; // 以React为例，其他框架逻辑类似
import App from './App';

// 导出一个函数，每次热更新都会重新执行这个函数生成新的中间件
export default function createServerMiddleware() {
  const router = express.Router();

  router.get('*', (req, res, next) => {
    try {
      // 每次请求都重新获取最新的App组件，确保热更新生效
      const appHtml = renderToString(<App />);
      const html = `
        <!DOCTYPE html>
        <html>
          <head>
            <title>SSR + HMR Demo</title>
          </head>
          <body>
            <div id="root">${appHtml}</div>
            <script src="/client.bundle.js"></script>
          </body>
        </html>
      `;
      res.send(html);
    } catch (err) {
      next(err); // 把错误交给Express的错误处理中间件
    }
  });

  return router;
}

3. 在server.js中正确集成所有中间件 #

这一步是核心，要按顺序挂载webpack-dev-middleware、webpack-hot-middleware和webpack-hot-server-middleware：

import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackHotServerMiddleware from 'webpack-hot-server-middleware';
import webpackConfig from './webpack.config.js';

const app = express();
const compiler = webpack(webpackConfig);

// 1. 用webpack-dev-middleware处理静态资源，开启serverSideRender支持
app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath,
  serverSideRender: true
}));

// 2. 给client入口挂载HMR中间件，注意要从compilers里找到client对应的编译器
app.use(webpackHotMiddleware(
  compiler.compilers.find(comp => comp.name === 'client'),
  { log: false }
));

// 3. 最后挂载webpack-hot-server-middleware，它会自动加载最新的server bundle并使用其导出的中间件
app.use(webpackHotServerMiddleware(compiler));

// 错误处理中间件，捕获SSR过程中的错误
app.use((err, req, res, next) => {
  console.error('SSR Error:', err.stack);
  res.status(500).send('Server Error During SSR');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

关键注意点 #

• 不要缓存server端模块：比如不要在entry_server.js的模块级别缓存App组件，每次请求都要重新import，否则热更新后还是旧代码。
• babel配置适配：如果用Babel，确保@babel/preset-env的targets.node设为current，支持Node.js的commonjs模块。
• server端CSS处理：如果你的SSR组件引入了CSS，server端可以用null-loader跳过编译，避免Node环境报错。

这样调整后，webpack-hot-server-middleware就能正常工作了——每次修改代码后，Webpack会重新编译client和server bundle，中间件会自动加载最新的server渲染逻辑，同时client端也会触发HMR更新。

内容的提问来源于stack exchange，提问作者dennis