ホットリロードを可能にするためにエクスプレスサーバがウェポンミドルウェアでどのように動作しますか？

Question

私はノード、エクスプレス、ウェブパックについて学び、ミドルウェアについていくらか混乱しています。以下のコードを見ると、Webサーバーを起動してhttp://localhost:7770/を開くと、ブラウザはサーバーに2つのミドルウェアを経由してdistディレクトリにメモリを取得しようとしている要求を発行します。その後、要求は以下のヒット：

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

順番にdistフォルダにbundle.jsを要求しますindex.htmlを送るであろう。 webpack-hot-middlewareは、ファイルに保存された変更をリッスンし、サーバー上でホストされる新しいバンドルを自動的に構築します。これは正しいです？私は、ミドルウェアが呼び出されたとき、要求がなされたとき、またはコードに変更（および保存）が行われたときに完全にはわからないのですか？

devServer.js

var path = require('path'); 
var express = require('express'); 
var webpack = require('webpack'); 
var config = require('./webpack.config.dev'); 

var app = express(); 
var compiler = webpack(config); 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.use(require('webpack-hot-middleware')(compiler)); 

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

app.listen(7770, 'localhost', function(err) { 
    if (err) { 
    console.log(err); 
    return; 
    } 

    console.log('Listening at http://localhost:7770'); 
}); 

webpack.config.dev.js

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

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './client/pokeapp' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     // js 
     { 
     test: /\.js$/, 
     loaders: ['babel'], 
     include: path.join(__dirname, 'client') 
     }, 
... 

Answer 1

私はあなたが使用しているモジュールをWebPACKのものにスーパー慣れていないんだと、彼らが含まれている場合livereloadサーバーかどうか。

あなたが書いたものに基づいて

が、これはおそらく何が起こっているかです：サーバーがクライアントからの要求を受信したときに

1. ミドルウェアが実行される
2. 私はWebPACKのは、あなたの「bundle.js」を生成していると考えていますクライアント要求が送信されたときにオンザフライで他のファイルが表示されます。
3. クライアントは、bundle.jsへの変更を探す必要があるとは必ずしも言いません。

これは開発目的で使用しているようです。その場合は、this tutorial for gulp/nodemon/livereloadが行うことができます。