Реагирование на стороне сервера с горячей перезагрузкой модуля

Я много читал об этом, кажется, на github есть много шаблонов, которые позволяют обоим использовать webpack-dev-server для перестройки клиентского пакета. Тем не менее, я не уверен, как или если сервер перегружен горячим модулем. Есть ли способ настроить веб-пакет для включения HMR на стороне сервера? В противном случае, кажется, что все, что я изменяю, не будет обработано сервером, только обновлено на клиенте.

Мой конфиг веб-пакета выглядит примерно так:

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 запустить веб-пакет

Источник

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

И просто зайдите в порт в браузере, ваш клиент появится.

Надеюсь это поможет.

Источник
Другие вопросы по тегам