Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc


94

サーバー側でレンダリングされるアプリケーションを開発する環境での作業を開始しwebpackていnode/expressます。開発環境と本番環境(ランタイム)環境での各Webpackパッケージの役割について非常に混乱しています。ReactJSreact-router

これが私の理解の要約です:

webpack:パッケージであり、Webアプリケーションのさまざまな部分を結合して1つの.jsファイルにバンドルするツールです(通常はbundle.js)。結果ファイルは、アプリケーションによってロードされる本番環境で提供され、コードを実行するために必要なすべてのコンポーネントを含みます。コードの縮小、縮小などの機能があります。

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

上記のテキストに疑問がある場合、以下の内容は本当にわかりません。必要に応じてお知らせください

使用して一般的な問題webpack-dev-servernode/expressIS webpack-dev-serverであるとして、サーバーですnode/express。そのため、この環境では、クライアントと一部のノード/エクスプレスコード(APIなど)の両方を実行するのが難しくなっています。注:これは私が直面している問題ですが、なぜこれが発生するのかを詳しく理解するのに役立ちます...

webpack-dev-middleware:これは同じ機能webpack-dev-server(インメモリバンドリング、ホットリロード)を備えたミドルウェアですが、server/expressアプリケーションに挿入できる形式になっています。このようにしてwebpack-dev-server、ノードサーバーの内部に一種のサーバー()があります。 おっと:これはクレイジーな夢ですか??? この作品はどのようにして開発と製品の方程式を解決し、人生をよりシンプルにすることができますか

webpack-hot-middleware:これ... ここにくっついて...探しているときにこの部分が見つかりました... webpack-dev-middleware使い方がわかりません。

ENDNOTE:申し訳ありませんが、間違った考えがあります。複雑な環境でこれらのバリアントを理解するために本当に助けが必要です。都合がよければ、シナリオ全体を構築するパッケージ/データを追加してください。


2
ここにリストされているパッケージはいずれも、本番環境のサーバー側では使用されていません。これらは単なる開発ツールです。独自のカスタム開発サーバーを作成する場合は、webpack-dev-middlewarewebpack-hot-middleware場合によっては)を使用します。必要のない特定の機能がない限りwebpack-dev-server、それを使用する必要があります。
Joe Clay

回答:


119

webpack

すでに説明したように、Webpackはモジュールバンドルであり、主にブラウザーで実行できるようにさまざまなモジュール形式をバンドルしています。CLINode APIの両方を提供します

webpack-dev-middleware

Webpack Dev Middlewareは、Expressサーバーにマウントして、開発中にバンドルの最新のコンパイルを提供できるミドルウェアです。これは監視モードでwebpack Node APIを使用し、ファイルシステムに出力する代わりにメモリ出力します

比較のために、express.static本番環境ではこのミドルウェアの代わりに次のようなものを使用できます。

webpack-dev-server

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

webpack-hot-middleware

Webpack Hot Middlewareは代替手段ですwebpack-dev-serverが、サーバー自体を起動する代わりに、既存の/カスタムエクスプレスサーバーと一緒にマウントすることができますwebpack-dev-middleware

また...

webpack-hot-server-middleware

さらに混乱させるために、サーバーレンダリングアプリのホットモジュールの置き換えと一緒に使用webpack-dev-middlewarewebpack-hot-middlewareて処理するように設計されたWebpack Hot Server Middlewareもあります。


2
バックエンドのホットモジュールの交換内訳対フロントエンド探しの方のために、この記事を参照してください。stackoverflow.com/questions/46086297/... Xleeは、それぞれの側の要件を説明する良い仕事をしていません-サーバー側は再起動を必要とします、フロントエンドにより、更新されたjavascriptバンドルをロードできます。
アベリト

9

2018年の更新時点で、公式のGitHubページにあるwebpack-dev-serverのメモを検討しています。

メンテナンス中のプロジェクト現在、webpack-dev-serverはメンテナンスのみのモードであり、近い将来追加機能を受け入れないことに注意してください。ほとんどの新機能のリクエストはExpressミドルウェアで実行できます。ドキュメントのbeforeフックとafterフックの使用を検討してください。

Webpack HMRを構築するための自然な選択は何ですか?


2
また、webpack-serveUse webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.を試すこともできます。
Bruce Sun

3
メンテナンスノートが削除されました。だから、またお勧めだと思いますか??? そのような重要な開発ツールがその周りにひどいメンテナチームを抱えていることに腹を立てています。
キャプテンフォジェッティ2018

5
webpack-serveは非推奨になり、@ CaptainFogettiが言ったように、今日のメンテナンスノートはwebpack-dev-serverから削除されました
Anoop D
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.