問題タブ [webpack-hmr]

何ヶ月も使用webpack-dev-middlewareしwebpack-hot-middlewareていて、問題なく動作していましたが、今、何かが起こり、webpack がファイルの変更の監視を停止したため、アプリを再起動したときにのみバンドルが再構築されます。何が起こる可能性がありますか？私は、fs.inotify.max_user_watches = 524288設定をオンにして:set backupcopy=yesvimオプションも調整したarch Linuxを使用しています。何が起こる可能性がありますか？物事を取り戻す方法は？

ログに表示されるように、最初のバンドルが行われ、ミドルウェアが適切にロードされます。以下は、エントリー アプリに webpack ミドルウェアをロードする行です。

とwebpack.config.js

と を使用webpackしhtml-webpack-pluginて、生成されたスクリプト バンドルで index.html ファイルを更新しますbundle.[hash].js。

次にwebpack-dev-server、そのバンドルをメモリにロードし、ホット モジュール交換を利用できるように実行する必要があります。

これにより、コードが 2 回コンパイルされます。

ただし、私が望むのは、 index.htmlファイルを新しいでwebpack-dev-server更新できるようにすることです。2回コンパイルするのは奇妙に思えます。bundle.[hash].jswebpackwebpack-dev-sever

繰り返しますが、実行する唯一の理由webpackは、index.html ファイルをバンドルの新しいハッシュで更新することです。webpack-dev-server更新された index.html をディスクに出力できれば、webpackコマンドを完全に削除できます。

これは可能ですか？もしそうなら、webpack構成の変更はどうなりますか? 私の webpack 構成は非常に長いので、ここに投稿するのに役立つとは思いませんでした。

私はすでに多くのボーダーケースと奇妙な開発者インターフェースを見てきました。

特にタブレットでは、実際には実用的ではない「デバイスを振る」から

ボタンの押下をシミュレートするためにAndroid スタジオを操作するには。

それを行う一貫した方法はありますか？インターン API を使用して、アプリ内にデバッグ ボタンを配置し、次のようなメニューを起動することはできませんnavigator.popUpDevMenu()か?

そうでない場合は、タブレットを振って動作させるにはどうすればよいですか。これは、実際のデバイスで HMR を構成する方法も解決することを目的としています。React Native は開発エクスペリエンスを向上させますが、特定のことが少し遅くなると思います。

開発環境にホットリロードを実装しました。私の JavaScript は多くのチャンクに分割されています。ファイルに変更を加えるたびに、すべてのチャンクが再送信されます。webpack-dev-server を実行しています。

次に例を示します。

ご覧のとおり、実際にビルドされたのは mychange.jsx ファイルだけです。ただし、残りはまだ放出されており、変更には 2.4 秒かかりました。

どうしてこれなの？webpack の設定が不足していますか?

webpack --watch を実行して変更を加えると、適切なチャンクのみが出力されます。だから、私が見逃している小さな何かに違いないことはわかっています。

Redux Devtools Chrome 拡張機能を備えた webpack Hot Module Replacement(HMR) Plugin を使用しています。ただし、HMR が実行されるたびに、Redux ローカル アプリの状態はすべての初期値にリセットされます。私のwebconfigは次のとおりです。

そして、これが私のメインアプリ index.js の外観です。

react-hot-loader用の Docker コンテナーを作成したいと考えています。しかし、inotify はおそらくコンテナー内では機能しません。したがって、HMR は壊れています。

Docer for mac バージョン 1.12.0-rc2-beta16 (ビルド: 9493) を使用しています。

これは私の docker-compose.yml です。

私のDockerfileは以下です

そして、react-hot-loaderディレクトリを同じディレクトリに配置しました。

を実行するdocker-compose upとアクセスできlocalhost:8000、React プロジェクトがうまく機能します。ただし、ローカル マシンで React コンポーネントを編集しても、HMR は機能しません。

コンテナー内の React コンポーネントを編集しようとしたとき、HMR はうまく機能しました。

また、 inotify-toolsで inotify がうまく動くかどうかを確認しました。次に、ローカル マシンでファイルを編集すると、inotify が機能しません。もちろん、コンテナ内のファイルを編集するときはうまく機能します。

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. _

何か案は？

ページが正しく読み込まれ、クライアント コンソールにログが記録されます[WDS] Hot module replacement enabled。しかし、ファイルに変更を加えても、ページには何も反映されません。リロードでも。サーバーの再起動時のみ。

これが問題かどうかはわかりませんが、私は redux を使用しています。

webpack.config.js

.babelrc

React コンポーネントで関数をマウント時からアンマウントするまで繰り返し呼び出し、webpack HMR (ホット リロード) で機能させたいと考えています。

最も簡単な方法は、ReactJS ドキュメントで提案されているように、componentDidMount に間隔を設定することです: [1]: https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

検索しましたが、更新されたコンポーネントに対して webpack HMR が componentDidMount を呼び出す前に間隔をクリアする解決策が見つかりません。これは、モジュールがホット リロードするたびに新しい間隔があることを意味します。

注: componentWillUnmountWebpack が再バンドルされる前には呼び出されません

componentWillUnmount更新: HMR が適切に設定されている場合、再バンドルを呼び出す必要があります

webpack HMR で繰り返し遅延関数呼び出しを実現する最良の方法は何ですか?