問題タブ [webpack-hmr]

これは、ホット モジュールのリロードまたはリフレッシュ時に発生します。なぜそれが起こっているのか分かりません。アプリを再度ブートストラップするには、ビルド プロセスを再起動する必要があります。

2 つのホット モジュールがリロードされるまではすべて正常に動作し、ビルドがエラーで中断されます。

vendors.js: Uncaught TypeError: Webpack の使用中に undefined のプロパティ 'apply' を読み取れません

以下は私の設定ファイルです：

このバグについてはあまり見つけられませんでした。また、ブラウザのキャッシュをクリアし、すべての Cookie を削除しましたが、役に立ちませんでした。

vendor.js ファイルも確認しました。縮小されていますが、ホットモジュールのリロード機能で壊れていることがわかります。どんな助けでも大歓迎です。ありがとうございます。

変更を加えると、ターミナルに次のように表示されます。

しかし、この後、私はもう何もできません。リフレッシュすると、次のように表示されます。

以前は機能していましたが、これから更新してから：

これに：

もう機能しません。

これらは、実行に使用する2つのコマンドです。

これは私の dev.config へのリンクです: dev config

何がこれを引き起こしているのでしょうか？

前もって感謝します。

私は最近、Webpack の調査を開始しました。これは、真の CSS モジュールの記述を可能にする優れた機能と、スマートなバンドルなどと、HMR があるためです。それが私がここにいる理由です。ブラウザーをリロードせずに JavaScript コードを更新できる React Redux プロジェクトの例を見てきました。うわー、私はそれは不可能だと思いました。

Vanilla JS である私の現在のプロジェクトで動作させるために、特にフードの下でどのように機能するかをもっと知りたいと思っていました。

その間、関数型プログラミング言語への関心から Emacs にたどり着きました。javascript と HTML を更新する emacs エディターで利用可能な串刺しモードがあることがわかりました! ブラウザを再ロードせずにリアルタイムで。

どちらもローカルサーバーを使用して変更をブラウザにプッシュし、何らかの形でコードを更新するクライアント上のスクリプトを使用していることを知っています。しかし、アプリケーションの状態をどのように保持するのでしょうか。React プロジェクトに関しては、アプリのコンポーネント ベースの性質により、コンポーネントを新しいものに置き換えることができますが、変数を検索して新しい値を再割り当てする方法がわかりません。たぶん、彼らはいくつかの評価魔法を使っています。しかし、よくわかりません。

1. では、それらはどのように正確に機能するのでしょうか? 視点が間違っているのかもしれませんが、はっきりとしたイメージがありません。

2. EmacsにはHTMLのライブアップデートもあります.webpack HMRはそれを行うことができますか?
   (私はJSでやっているので、HTMLについてはあまり気にしません。しかし、これら2つの違いを説明できると思います。)

3. そうすることでどちらが良いですか？
   それぞれの長所と短所は何ですか? それとも、それらは単に世界の異なる部分であり、統合してさらに優れたものにすることができますか?

4. ローカル Web サーバーのようなミドルウェアを必要とせず、ブラウザー拡張機能と通信するエディター プラグインだけで、さらに優れたオプションがあるのではないでしょうか?

PS: 仕事を最適化できる学習ツールは気にしません。

私は React & Redux プロジェクトに取り組んでいました。このプロジェクトでは、webpack-dev-middleware とホット ミドルウェアを使用してホット リロードしていました。

Redux Saga をプロジェクトに追加し、saga ミドルウェアを redux ストアに追加した後。サガ コードを変更するたびに、ホット リロードが壊れてエラー メッセージが表示されるようです。

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

Saga はジェネレーターを使用しており、時間に依存していることを理解しています。Sagas でページをホットリロードできますか? ホットリロード中にReduxレデューサーが自分自身を置き換える方法と同じです。

ありがとう！

my app.jsand main.csswhileを変更するwebpack-dev-serverと、バンドルが更新されます。しかしindex.html、コンテンツを変更しても更新されません。HTML に行を追加するとwebpack-dev-server、ページ上の何も更新されません。これが私webpack.config.jsのpackage.jsonファイルです。あなたが私を助けてくれることを願っています。

webpack.config.js :

パッケージ.json :

私のディレクトリ構造：

ディレクトリ内のすべてのファイルdistは webpack によって生成されます。

最新（v3）のreact-redux-starter-kitを使用しています。すべてがうまくいき、HMR 以外の新しいプロジェクトがセットアップされました。リロードされず、変更が表示されません。ブラウザのコンソールを確認しました：[HMR] connected

さらに調査した結果、Vagrant ボックス (ログイン済み) 内で変更を加えると、HMR が機能することがわかりました。したがって、ホスト マシン (Mac OSX) と Vagrant ボックスの間のファイル システム レベルの問題である必要があります。

誰かが以前にこの問題を抱えていましたか?

更新: vagrant-notify-forwarder という Vagrant プラグインを見つけてインストールしました。これで、fs イベントがゲスト システムに転送されます。しかし、HMR はまだ故障しています...このスレッドで、ATTRIB の変更のみがゲスト システムに送信されると述べた人がいます。それがHMRに十分かどうかはわかりません...

更新 2: Guard/Listen という別のツールをセットアップしようとしています。誰かがそれを使用する方法を知っていれば、おそらくこの質問を解決できるでしょう. しかし、私にとってはこれまでのところ運がありません...

webpack -dev-server で HMR を有効にするために目にするすべてのドキュメントまたは記事では、 を使用する必要があります。興味深いことに、フラグwebpack-dev-server --hot --inlineを省略してコードベースの HMR のみを保持しても、引き続き機能します。すべてのドキュメントは古いですか、それとも間違っていますか?hotinline

devServerwebpack config でオプションを定義していません。ここに web-pack config があります

これが私のpackage.jsonスクリプトです

ここにコード全体があります

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

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

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

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

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

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

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

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

webpack.config.js

Typescript、ReactJS、およびWebpackで構築されたフロントエンドアプリがあります。
HMRを有効にしようとしています。
これらは開始スクリプトです

これは私の ts-loader です

そして私の開発サーバー構成

エラーから抜け出せない