web-dev-qa-db-ja.com

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

私はwebpackを使用して、node/express環境でReactJSサーバー側レンダリングアプリケーションをreact-routerで開発し始めています。 devおよびprod（ランタイム）環境での各webpackパッケージの役割について非常に混乱しています。

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

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

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

上記のテキストについて疑問がある場合、以下の内容については本当によく分からないので、必要に応じてアドバイスしてください

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

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

webpack-hot-middleware：This ...Stuck here ... webpack-dev-middleware...を探しているときにこの作品を見つけました。

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

javascriptnode.jswebpackwebpack-dev-serverwebpack-dev-middleware
81
Mendes

webpack

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

webpack-dev-middleware

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

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

webpack-dev-server

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

webpack-hot-middleware

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

また...

webpack-hot-server-middleware

さらに混乱させるために、webpack-dev-middlewareおよびwebpack-hot-middlewareとともに使用して、サーバーレンダリングアプリのホットモジュール交換を処理するように設計されたWebpack Hot Serverミドルウェアもあります。

101
riscarrott

2018年の更新時点で、webpack-dev-serverに関する考慮事項 その公式GitHubページ：

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

Webpack HMRを構築する自然な選択は何でしょうか？

9
Mendes