web-dev-qa-db-ja.com

エクスプレスのようなノードサーバーを使用している場合、webpack-dev-serverが必要ですか

ExpressとReactを使用して同型アプリを構築するためのいくつかのチュートリアルに従っています。 webpack-dev-serverと混同しています。

Webpackチュートリアルでは、webpack-dev-serverについて説明しています。

これにより、localhost:8080上の小さなエクスプレスサーバーがバインドされ、静的アセットとバンドル(自動的にコンパイルされます)が提供されます。

バンドルが再コンパイルされると、ブラウザページが自動的に更新されます(socket.io)。ブラウザで http:// localhost:8080/webpack-dev-server/bundle を開きます。

エクスプレスサーバーがあるので、webpack-dev-serverは本当に必要ですか?それとも、それを使用する利点と欠点は何ですか?そして、react-hot-loaderを使用したい場合、webpack-dev-serverは必要ですか?

44
Brick Yang

エクスプレスサーバーがあるので、webpack-dev-serverは本当に必要ですか?

はいといいえ。基本的にwebpack-dev-serverをプロキシとして設定するハイブリッドアプローチを使用できます。アセット以外のすべてにサービスを提供するエクスプレスサーバーがあります。アセットの場合、リクエストはwebpack-dev-serverに転送/プロキシされます。詳細については、こちらの回答を参照してください。 webpack-dev-serverがreact-routerからのエントリポイントを許可する方法

または、すべての乱雑なプロキシロジックを処理し、2台のサーバーを実行したくない場合は、代わりに webpack-dev-middleware および webpack-hot-middleware を使用できます。こちらの例をご覧ください: https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/server.js

それを使用することの利点と欠点は何ですか?

ライブリロードとホットモジュールの交換。私の意見では、開発に非常に便利な機能

そして、react-hot-loaderを使用したい場合、webpack-dev-serverは必要ですか?

いいえ、Webpackの ホットモジュール交換インターフェイス の上で動作します。必要に応じて、独自の「ホットサーバー」を作成できます。 webpack-dev-serverクライアントは、ホットアップデートのためにsocket.ioをリッスンし、postMessageを呼び出します( https://github.com/webpack/webpack-dev-server/blob/8e8f540b2f7b35f7b6c3ce616a7fd2215aaa6eea/client/index.js# L64-L67 )その後、サーバーによって取得されます https://github.com/webpack/webpack/blob/bac9b48bfb0f7dd9732f2faafb43ebb22ee2a2a7/hot/only-dev-server.js#L59-L67 =。

または、私がお勧めするのは、代わりに上記のwebpack-dev-middlewareとwebpack-hot-middlewareを使用できることです。この方法により、プロキシロジックを心配する必要がなく、webpack-dev-serverを必要とせずに、既存のエクスプレスサーバーにホットリロードを簡単に統合できます。

59
trekforever