[解決済み] Webpackとwebpack-dev-serverとwebpack-dev-middlewareとwebpack-hot-middlewareとetc.

質問

私は今 webpack を使って node/express を開発する環境 ReactJS でサーバサイドレンダリングアプリケーションを開発する react-router . devとprod（実行時）環境での各webpackパッケージの役割について、非常に混乱しています。

以下、私の理解のまとめです。

webpack : パッケージとは、ウェブアプリケーションの異なる部分を結合し、単一の .js ファイルにバンドルするためのツールです (通常は bundle.js ). このファイルは、アプリケーションによって読み込まれるようにprod環境で提供され、コードを実行するために必要なすべてのコンポーネントを含んでいます。機能には、コードの縮小、最小化などがあります。

webpack-dev-server : を提供するパッケージですか？ サーバ を使用して、ウェブサイトのファイルを処理します。また、単一の .js ファイルを構築します ( bundle.js ) を構築しますが、それはメモリ内で提供されます。また、オプションで ( -hot ) のオプションもあり、すべてのビルドファイルを監視し、コードが変更された場合にはメモリ上に新しいバンドルをビルドします。サーバーはブラウザで直接提供されます (例: http:/localhost:8080/webpack-dev-server/whatever ). インメモリローディング、ホットプロセッシング、ブラウザサーブの組み合わせにより、ユーザーはコードが変更されたときにブラウザ上でアプリケーションを更新することができ、開発環境として理想的です。

私は上記のテキストについて疑問がある場合、私は以下の内容について本当にわからないので、必要に応じて私に助言してください。

を使用する際によくある問題です。 webpack-dev-server と node/express は、その webpack-dev-server はサーバーであり、同様に node/express . そのため、この環境はクライアントといくつかのnode/expressコード（APIなど）の両方を実行するには厄介なものとなっています。 注：これは私が直面したものですが、なぜそれがより詳細に起こるかを理解するのは素晴らしいことだ...

webpack-dev-middleware : と同じ機能を持つミドルウェアです。 webpack-dev-server と同じ機能(インメモリバンドル、ホットリロード)を持つミドルウェアですが、その形式は server/express アプリケーションに注入できる形式です。このようにして、ある種のサーバー（ )がノードサーバーの内側に入ります。 おっと。これは狂気の夢ですか ? この作品は、どのように開発者と生産者の方程式を解決し、人生をよりシンプルにすることができます。

webpack-dev-server : この... を探していて、この作品を見つけました。 webpack-hot-middleware ... 使い道は不明です。

注：間違った考えがある場合は申し訳ありません。私は本当に複雑な環境でこれらの変種を理解するために助けを必要としています。もし便利であれば、シナリオ全体を構築するためのパッケージやデータを追加してください。

どのように解決するのですか？

webpack-dev-middleware

説明したように、Webpackはモジュールバンドルラーであり、主にブラウザで実行できるように様々なモジュール形式を束ねます。これは CLI と ノードAPI .

webpack

Webpack Dev Middleware は、Express サーバーにマウントすることで 最新コンパイル を提供します。これには webpack-dev-middleware の Node API を ウォッチモード で、ファイルシステムへ出力する代わりに メモリに出力する .

比較のために、次のようなものを使うかもしれません。 webpack のようなものを使うかもしれません。

express.static

Webpack Dev Server はそれ自体がエクスプレスである サーバ であり webpack-dev-server を使用して最新のバンドルを提供し、さらにクライアントのライブモジュール更新のためのホットモジュール交換 (HMR) リクエストを処理します。

webpack-dev-middleware

Webpack ホットミドルウェアは webpack-hot-middleware と並んで、既存/カスタムの express サーバーにマウントすることができます。 webpack-dev-server .

また...

webpack-dev-middleware

さらに混乱させるために、Webpack Hot Server Middlewareもあります。 webpack-hot-server-middleware そして webpack-dev-middleware で、サーバー・レンダリング・アプリのホット・モジュールの置き換えを扱います。