ホットモジュールリロードでサーバ側のレンダリングに反応する

私はこのことについて多くの読者をしてきましたが、githubで利用可能な多くの定型文がwebpack-dev-serverを使用してクライアントバンドル。しかし、サーバーがどのようにホット・モジュールがリロードされているのかわかりません。サーバー側で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の設定は次のようになります

私はwebpack-dev-server --content-base src --inline --hotを使ってwebpackを実行します

出典

2017-02-08 user490895

はあなたのwebpack設定ファイルを共有していますので、私たちはあなたに応じて –

をお手伝いします。何か他のものを提供できるかどうか教えてください。 – user490895

server.jsでコードを実行したいと考えています。そのファイルを実行するには、package.jsonにスクリプトを作成します。例えば

：

"serve":"nodemon server.js"

その後、HMRのお手伝いをすることができますwebpack-dev-middlewareとwebpack-hot-middlwareあるwebpack-dev-serverに代替を追加します。

これは、あなたが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設定にseverエントリーポイントを追加する必要がありますか？ – user490895

いいえ、そうする必要はありません。 'nodemon'をインストールしたか実行しましたか？ – ickyrr

'nodemon'の目的はあなたの' server.js'の変更を見ることです。 – ickyrr

ホットモジュールリロードでサーバ側のレンダリングに反応する

答えて

関連する問題