問題タブ [hot-module-replacement]

( )webpackを使用して問題なく動作するビルドに使用していますが、製品ビルド ( ) を作成しようとすると、Web サイトを読み込もうとするとコンソールにエラーが表示され、何も表示されないようです。画面上で。webpack-dev-servernpm run watchnpm run build

不明なエラー: [HMR] ホット モジュール交換が無効になっています。

これについていくつか質問があります。

1. 使用についての私の理解は、Hot Module Replacement開発中の生活を楽にするために設計されており、本番環境で使用するべきではないということです。あれは正しいですか？

2. 以下を考えると、なぜ がHot Module Replacement使用されているのですか? 何がそれを動かしているのかわかりません。

3. 製品ビルドに関しては、ベスト プラクティスは何ですか?製品用と開発用に別々の構成webpackを用意する必要がありますか? 理想的には、メンテナンスを容易にするために、単一の構成を使用したいと考えています。

パッケージ.json

webpack.config.js

反応コンポーネントを更新しようとすると、次の警告が表示されます...

プロバイダーは、その場での変更をサポートしていませんstore。Redux 2.x および React Redux 2.x に更新したため、このエラーが表示される可能性が最も高くなります。移行手順については、https://github.com/reactjs/react-redux/releases/tag/v2.0.0を参照してください。

私の知る限り、私のコードは指示のように見えますが、それでも警告が表示されます。

client.js

configureStore.js

サーバー.js

足りないものはありますか？完全な src を見たい場合は、完全なGithub リポジトリへのリンクを次に示します。

[編集] server.js と github リンクを追加。

React ReduxNative とHMR. レデューサーを変更すると、受け入れが次のconfigureStore.jsファイルを呼び出します。

しかし、HMR はスタック オーバーフローまでループ内の参照を検索し続けます。どこかに循環参照があるのでしょうか？もしそうなら、それを追跡するためのヒントはありますか？コードをステップ実行してみましたrequire.jsが、「参照」は数字として保持されているため、正しいファイルを追跡するのが難しくなっています。

私はWebpackを使い始めたばかりなので、危険なほどの知識しかなく、構成ファイルをかなり混乱させたと確信しています。しかし、それは私のマシンで問題なく実行されている、サバイバルJSの例に非常によく似ています。ただし、アプリをロードすると、WebSocket ハンドシェイクの失敗に関する一連のメッセージがコンソールに表示されます。

すべてが2回ロードされます。そして、ファイルを更新するたびに、上記のすべてのエラーの繰り返しに加えて、さらに多くのエラーが発生します。

なぜそれが私に怒っているのか分かりますか？

これが私のwebpack構成です（ビルドは問題なく動作します）：

バンドルに webpack ランタイムが重複している理由を知っている人はいますか?

? の後に複数の数字を追加しています。ブラウザはそれらを新しいファイルとして認識しています。

• dev-server.js?
• dev-server.js?52d4
• dev-server.js?53d4*

左側のファイル ツリーを参照してください。

なぜこれを行うのですか？バンドル内のファイルのコピーが 1 つだけ必要です。

反応/タイプスクリプト (TSX を使用) 環境でホットモジュールのリロードをセットアップしようとしています。物事を進めるためのモデルとして、react/redux の実世界の例を使用しました。これがこれまでのところです。

サーバー.js

webpack.config.js

index.tsx

コンテナー/root.tsx

ルート要素を に変更<p>boom pow</p>する<p>boom boom pow</p>と、ブラウザーの JavaScript コンソールでこれが開始されます。

私が知る限り、これらの手順を実行しましたが、まだうまくいきません。

私は何が欠けていますか？

grunt-webpack を使用しています。webpack-dev-server を起動しようとすると、このエラーが発生します Module parse failed: /u/saxenat/react-blueprint/src/js/app.jsx Unexpected token (5:16) You may need an appropriate loader to handle this file type.

この質問を締めくくる前に、一言言わせてください。webpack はファイルを適切にバンドルしています。grunt-webpackプラグインは、 と の 2 つのタスクを提供grunt-webpackしますgrunt-webpack-dev-server。サーバーで HMR を試すと、失敗します。それ以外の場合は正常に動作します。

babel-loaderプリセットes-2015とreact. _

何か案は？

私は webpack よりも browserify を好みますが、browserify 環境には修正できない問題があります。私はreact、redux、react-routeを使用しており、react-hot-loaderがwebpack環境に提供するもののように、ホットモジュールをリロードしたいと思っています。これを達成するために livereactload を使用しています (browserify-hmr も試しました) 問題は、redux では機能しないことです。その redux の例 ( https://github.com/milankinen/livereactload/blob/master/examples/02-redux ) は、新しいクローンでは機能しません。それはまったく可能ですか？この例を機能させるために必要な変更を誰かに教えてもらえますか?

PSはこの問題を見てください https://github.com/milankinen/livereactload/issues/64