問題タブ [webpack-hot-middleware]

セットアップでホットリロードを機能させようとしています。現在、それはそのように動作します -

サーバー.js

gulpfile.babel.js

今、

• 私が訪問した場合localhost:5000。できます
• にアクセスするlocalhost:3000/build/client.jsと、それも機能します

しかし、ライブアップデートを取得できないものを更新する場合は、更新する必要があります... :(

[ネットワーク] タブを見ると、 へのリクエストが失敗していることがわかります http://localhost:5000/__webpack_hmr。これが原因ではないかと考えています。

http://localhost:5000/__webpack_hmr実際にあるはずですhttp://localhost:3000/__webpack_hmr

ただし、これを修正する方法がわかりません

反応ステートレス関数を使用したホットリロードではなく、クラス拡張コンポーネントを作成すると正常に動作する webpack-dev-middleware に少し問題があります。

たとえば、これは完全に機能します。

しかし、これは惨めに失敗します。

エラー：

Webpack にバンドルされている Express サーバー アプリケーションがあります。クライアント側も webpack にバンドルされており、開発モードで HMR の webpack-dev-middleware および webpack-hot-middleware を使用してサーバーによって提供されます。

React コンポーネントを変更すると、クライアント側で変更が発生するはずですが、HMR の使用を開始したときに問題が発生します。

コンポーネントはクライアントでホット置換されるため、ファイルの「新しい」バージョンが使用されますが、サーバーは webpack にバンドルされているため古いバージョンのままです。したがって、サーバー レンダリングを使用すると、2 つの結果が異なります。コンポーネントを変更するときにサーバーも変更する方法はありますか?

アプリでパスまたは同様のものにいくつかの単純な問題があると思います。

index.html の内容

webpackConfig: (入力セクションと出力セクションのみ)

webpack は public/build フォルダーにビルドします。ここで、webpack-hot-middleware を構成して高速サーバーを実行しているときに、localhost でインデックス ページを読み込むことができますが、以下のように webpack スクリプトに対して 404 がスローされます。

現在の問題を更新:

次のcmd:webpackを実行すると、通常どおりビルドできるため、webpackホットローダーがうまくいかないようです。しかし、「dev」を実行すると、「webpack-dev-server --color --hot --進行状況 && ノード ./server.js"".webpack はビルド ファイルを生成できません。

私のwebpack.configは次のとおりです：

サーバー.js

webpack-hot-middlewareNode.js サーバーでとwebpack-dev-middlewareライブラリの両方を使用して、Webpack ホット リロードを利用できる TypeScript で記述されたプロジェクトがあります。

また、パブリック ディレクトリに 1 つの CSS ファイルを生成する Stylus コード (Gulp を使用したインクリメンタル ビルド) 用に構成されたすべてのビルド手順が既にあります。

したがって、TypeScript のものには既に Webpack のホット リロードがあるので、CSS にも Webpack のホット リロードを利用したいと思いますが、CSS ファイルをビルドしたくありません。理想的には、単一の CSS ファイルが変更されるたびに Webpack がホット リロードするようにしたいだけです。それを達成するための最も簡単で最良の方法は何ですか？

現在の構成ファイルは次のようになります。

そして、Webpack Hot Middleware と Webpack Dev Middleware を次のように使用します。

で使用WebpackしていHot Module Reloadingます。また、chrome 拡張機能を使用して、React Developer Tools開発中に反応ツリーを検査します。ページを調べてコンポーネント ツリーを確認すると、実際のコンポーネントの名前を確認したいと思いますが、すべてのコンポーネントの名前が として表示されProxy Componentます。

私の についての詳細をお知らせすることはできますが、Webpackこの問題を解決するために正しいことをグーグルで検索することさえ苦労しています.

私がwebpackに使用しているツールは次のとおりです。

webpack.config.js