使用热模块重新加载反应服务器端渲染答案

【问题标题】：React server-side rendering with hot module reload使用热模块重新加载反应服务器端渲染
【发布时间】：2017-02-08 17:56:09
【问题描述】：

我已经对此进行了大量阅读，似乎 github 上提供了很多样板文件，它们都可以使用 webpack-dev-server 来重建客户端包。但是，我不确定服务器如何或是否重新加载热模块。有没有办法配置 webpack 以在服务器端启用 HMR？否则，似乎我更改的任何内容都不会被服务器渲染，只会在客户端刷新。

我的 webpack 配置如下所示：

module.exports = {
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/public/",
    filename: "client.min.js"
  }
};

server.js：

app.get('/', function(request, response) {
  var html = ReactDOMServer.renderToString(React.createElement(Component));
  response.send(html);
});

Component.js：

module.exports = React.createClass({
  _handleClick: function() {
    alert();
  },

  render: function() {
    return (
      <html>
        <head>
          <title>{this.props.title}</title>
          <link rel="stylesheet" href="/style.css" />
        </head>
        <body>
          <h1>{this.props.title}</h1>
          <p>isn't server-side rendering remarkable?</p>
          <button onClick={this._handleClick}>Click me</button>
          <script dangerouslySetInnerHTML={{
            __html: 'window.PROPS=' + JSON.stringify(this.props)
          }} />
          <script src="/client.min.js" />
        </body>
      </html>
    );
  }
})

和client.js：

var props = window.PROPS;

ReactDOM.render(React.createElement(Component, props), document);

我使用webpack-dev-server --content-base src --inline --hot 来运行 webpack

【问题讨论】：

分享你的 webpack 配置文件，以便我们为你提供相应的帮助
已分享，如果我能提供其他信息，请告诉我。

标签： reactjs webpack webpack-hmr server-side-rendering

【解决方案1】：

您将希望通过您的server.js 运行您的代码。在您的 package.json 中创建一个脚本来运行该文件。

例如：

"serve":"nodemon server.js"

然后，添加webpack-dev-server 的替代项，即webpack-dev-middleware 和webpack-hot-middlware，可以帮助您使用HMR。

这就是你server.js 的样子：

import express from 'express';
import webpack from 'webpack';
import path from 'path';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

const port = 5000;
const app = express();
const config = require(path.resolve("./webpack.config.js"));

const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
}));

app.use(webpackHotMiddleware(compiler));

app.get("*", function(req, res, next) {
    res.sendFile( path.join( __dirname, '/path/to/your/index.html') );
});

app.listen(port, function(err) {
    if(err) {
        return console.log(err);
    }
    return console.log(`App is now running on http://localhost:${port}`);
});

然后，运行您的脚本，如下所示：

npm run serve

只需访问浏览器上的端口，您的客户端就会出现。

希望这会有所帮助。

【讨论】：

好的，我做到了，但是发生的是 server.js 本身没有热重载。我猜这是因为它不是我客户的依赖项。我需要在我的 webpack 配置中添加一个服务器入口点吗？
不，您不需要这样做。您是否安装和/或运行nodemon？
nodemon 的目的是观察你的server.js 的变化。