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

Я делаю много чтения по этому вопросу, похоже, что множество наборов, доступных на github, которые позволяют обе из них использовать webpack-dev-сервер для перестройки клиентского пакета , Тем не менее, я не уверен, как или перезагружается сервер. Есть ли способ настроить 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

источник

2017-02-08 user490895

поделитесь своим файлом конфигурации webpack, поэтому мы можем вам помочь –

поделился, дайте мне знать, если я могу предоставить что-нибудь еще. – user490895

Вы хотите запустить свой код через 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

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

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

источник

2017-02-09 08:00:25 ickyrr

Хорошо, я сделал это, но происходит то, что server.js сам по себе не перезагружен. Я предполагаю, что это потому, что это не зависимость моего клиента. Должен ли я добавить новую точку входа в мою конфигурацию webpack? – user490895

нет, вам не нужно это делать. Вы установили и/или запустили 'nodemon'? – ickyrr

Задача 'nodemon' - следить за изменениями' server.js'. – ickyrr

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

ответ

Смежные вопросы