webpack-dev-server を使用してホット モジュール置換の最小限の実例を作成しようとしています。基本的に、webpack を使用しbundle.jsて、ブラウザーによって呼び出される HTML ページに読み込まれて実行されるいくつかのモジュール モジュールを含むファイルを準備したいと考えています。

moduleAホットスワップ可能にしたいモジュールの例は次のとおりです。

そして、それを使用するメインモジュール（ホットスワップする予定はありません）があります：

たとえば、によって返される値を変更するmyAと、ボタンのアラート テキストが変更されることが予想されます。実際、コンソールには HRM サーバーとランタイムの間のすべてのメッセージが表示されますが、ボタンをクリックすると古いアラート値が表示されます。

メイン モジュールのホット スワップ ハンドラがスワップされたときに実行されないことを確認しmoduleAました。ある種のホットスワップイベントがrequireのチェーンをバブルアップすることは理解しましたが、明らかに私の場合はそうではありません。

残念ながら、周りのほとんどの 例 は複雑すぎるか、JS ベースではないか、何らかの理由で私が期待したものとは異なる動作をしています。

私の基本的な質問は、単純なモジュールを変更して本当にホットスワップ可能にする方法を誰か教えてもらえますか? .

全体像を知りたい人のために、ここにコードがあります

私は以前、ここにあるアプローチを使用して、HMR を RC4 と連携させ、Webpack の使用時に ngRX の状態を維持しました。

RC5 と ngModules では、ブートストラップ プロセスが変更されており、これを使用するために以前のアプローチをどのように適応させることができるかについて苦労しています。

誰かが私を正しい方向に向けたり、これを行う別の方法を提案したりできますか?

それ自体で完璧に機能するwebpack構成があります。提案されているように、React Hot Loader を HMR と一緒にインストールしようとしていますが、これには webpack-dev-server が必要です。ここで私はそれを機能させることができません。バンドルがどこにあるのかわかりません。私はそれがちょうどにあることを望みますlocalhost:3000。

私のwebpack.config.js：

そしてwebpack-server.js：

更新:リンクされた質問は、特に確認済みの回答がないため、役に立ちません。

どこから来たの

私はかなり長い間 webpack を使用してきましたが、スターター キットを変更せずにすべてをゼロからセットアップしようとするのはこれが初めてです。

私は、survivorjs.com のこの素晴らしい記事をたどり、そこで説明されているいくつかのアプローチを継承して、以前のセットアップのいくつかと組み合わせました (送信されたプロダクション変数に応じて異なる名前とパスを設定するなど)。

講義中は、追跡できない予期しない動作に巻き込まれないように、できるだけ「ビルド」と「開始」を実行するようにしました。これはうまくいきました。

その後、サードパーティのフレームワークから未使用の css を除外する 方法についての章をいじっているうちに、どういうわけか開発サーバーのセットアップを壊してしまいました。("run build"まだ動作します!)

問題

私のホット サーバーは 192.168.1.2:3000 で定義されています (これが私の望みです)。webpack-dev-server以下に示す設定で実行すると、その場所で404 ( Cannot GET / ) が返されます。今、私はwebpack devサーバーを正しくセットアップする方法について多くのことを読みましたが、まだ正しく理解できていません...(ほとんどの場合、ここだけではありません...)パスが機能します。

これは私の理解です（一般的な開発サーバーのセットアップ）：

（これについて間違っている場合は助けてください）

• 私の出力パスは、開発webpack.config.jsサーバーの実行中にメモリ内でのみ提供されるため、物理的には表示されません (出力がpath: path.join(__dirname, 'devServerFolder'たとえば、私が作成していない場合、プロジェクト構造のどこにもそのフォルダーが表示されない場合) )
• index.htmlmy を指す静的なフォルダーには、 withとbundle.jswith を指すフォルダーが必要です(これは、その中に作成する必要がある my である可能性があります。通常、Web 上のほとんどのセットアップでは、保存に使用される同じフォルダーが使用されます)。生産ビルドイン)publicPathcontentBasedevServerFolderindex.htmlpublic
• プラグインを使用html-webpack-pluginすると、bundle.jsがプラグインによって書き込まれるため、何かを指す必要なく自動的にそのファイルが生成されます

これらは、よく理解するのに本当に苦労している点の一部です。私はたくさん試しました。の。異なる。私の開発サーバーを再確立するために運がなければ、との設定で遊んでいる組み合わせ（最初はうまくいきました）。 コードや でビルドをコンパイルすることに問題はありません。publicPathcontentBaserun build

設定

フォルダ構造

Webpack.config.js

私は周りを見回しましたが、スタックオーバーフローで見た答えを得ることができません。

webpack または webpack dev-server のコマンドラインを使用できません。Node API の使用に制限されています。

以下は、私がwebpackをどのように使用しているかです。

webpack.config.js

gulp タスク「開始」に含まれる

私が期待すること

gulp start を実行すると、webpack dev サーバーが起動し、localhost:3000/ にアクセスできるようになると思います。これにより、プロジェクトの /dist/ フォルダーから index.html が読み込まれます。ここまでは順調ですね。ファイル (app.jsx など) に変更を加えると、その変更が存在することを期待します。

実際に起こっていること

「[HMR] Hot Module Replacement is disabled」というエラーが表示されますが、それ以上の説明はありません。

どんな助けでも大歓迎です。ホット リロードを 1 日中機能させようとしています。

私は Angular 2 を初めて使用し、HMR を自分の Angular 2 プロジェクトに実装したいと考えています (ページのリロードまでの待ち時間が非常に混乱するため)。

私は反応ネイティブから始めており、React の経験が少しあります。そのため、過去に Web React アプリに使用したredux、react-router、およびを使用したいと考えています。react-router-redux

これらのパッケージはすべて、react-native で使用できますが、react-router を除いて、私が見つけることができる最も近いreact-router-nativeものは、ブラウザー バージョンと同じように動作するようです。これまでのところ、ルーター、reduxなどをテストするための簡単で汚いアプリを作成しました.

しかし、解決方法やデバッグ方法がわからない問題がいくつかあります。テキストや一部のスタイルなどのビジュアルを変更すると、HMR は正常に動作し、変更がリアルタイムで適用されるように見えますが、他のものを変更するとモジュール/ファイル、コンテナー要素 (redux connect() 関数が呼び出される場所) やレデューサーの一部のコードのように、HMR は何も変更せず、変更を確認するにはすべてのアプリをリロードする必要があります。

ここに私のコードがあります: https://github.com/DenJohX/test-react-router-native基本的に、redux ストアの変数を切り替えることで、テキストの色を変更するだけです。リンクするだけで申し訳ありませんが、すべてのフォルダーとプロジェクト構造を表示する方がよいと思います。おそらく、そこに何かを間違えたか、正しいフォルダー構造を使用していませんでした.

https://github.com/jhen0409/react-native-debuggerを使用してアプリをデバッグしています。コンソール メッセージによって、HMR が実行され、何かにパッチが適用されますが、現在読み込まれているコードには影響しません。

問題をテストするには、 で色を編集してみてくださいsrc/screens/pageOneContainer.js。HMR はコードを変更し、画面を再レンダリングし、新しい色を表示する必要がありますが、同じままです。

前もって感謝します。

webpack-dev-server によってバンドルおよび提供される React アプリの API として機能する高速サーバーを実行しています。

ホットモジュール交換を機能させようとしていますが、ファイルに変更を加えると、コンソールに次のように表示されます。

ただし、手動で更新しない限り、アプリが再レンダリングされることはありません。これが関連しているかどうかはわかりませんが、.scssファイルを更新すると、手動で更新しなくても更新され、期待どおりに更新されます。

バージョン:

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

最新の webpack を試しましたが、解決できない検証エラーが発生しました。

経由で webpack を実行しています:"webpack": "webpack-dev-server --port 4000 --env.dev"で、Express サーバーは で実行されていhttp://localhost:3000ます。

これが私のものwebpack.config.babel.jsです：

これが私.babelrcの 、私が呼び出す場所ですreact-hot-loader

現在認証されているユーザーを追跡するために、Vue 2 に単純なユーザー ストアを実装しました。

次のようになります。

また、API からユーザーを取得してストアに保存する単純な認証サービス (プラグインとして実装) もあります。ユーザーがログインするたびに、またはアプリが読み込まれるたびに、認証サービスがユーザーを取得してストアに保存します。

別のコンポーネント (私のナビゲーション バー) からストアにアクセスしようとしています。userStore をインポートするために、コンポーネントにこれがあります。

これはすべて、Chrome と Firefox で非常にうまく機能しています。

ただし、Safari では、いくつかの奇妙な動作が発生します。

Navbar.vue ファイルを保存して navbar のデータに強制的にホット リロードを実行させると、データはストアからフェッチされます。ただし、他のすべての場合 (ページのリロード、またはログイン後の vue-router リダイレクトの後) では、navbar のデータは現在のユーザー ストアで更新されません。

これをすべてのブラウザで動作するように修正するにはどうすればよいですか?

編集：

もう少し情報があります：

Safari で更新ボタンを押すと、ランダムにユーザー ストアから正しくレンダリングされたデータを取得する場合と取得しない場合があります。

私の推測では、navbar データがレンダリングされたときにデータを利用できるように API 呼び出しが十分に速く返されることもあれば、返されないこともあります。

他のブラウザでは、ロード時にデータが利用できない場合でも、データが利用可能になるとリアクティブ データが更新されます。これは、何らかの理由で Safari には当てはまりません (ただし、ファイルを再保存して強制的に更新すると、ホット リロードが機能します)。

編集＃2：

これが問題であることを確認できます。ストアの更新時にデータが更新されません。

ストアからデータをフェッチする前に navbar コンポーネントを 2 秒間スリープ状態にすることでこれを証明し、Safari で毎回データが正しく取り込まれていることを確認しました。

では、質問はより基本的なものになります。Safari でストア パターンを使用するにはどうすればよいでしょうか。