問題タブ [hot-module-replacement]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - Webpack 2 HMR React を動作させることができません
現在、Webpack 2 セットアップで HMR を動作させるのに苦労しています。セットアップ全体を説明するので、誰かが何が起こっているのかを理解するにはこれで十分だと思います.
私のプロジェクトの構造:
これはwebpack.config.js
、プロジェクトのルートに配置されたファイルの内容です。
したがって、このファイルには、さまざまな環境をbuildConfig
関数に渡すオプションがあります。このオプションを使用して、開発用と本番用に異なる構成ファイルを使用します。これは私のpackage.json
ファイルの内容です:
もちろん、他にもフィールドはありますが、package.json
関係がないのでここでは示しません。
そのため、開発中にnpm run build:dev
端末でコマンドを実行します。dev.js
これにより、フォルダーのファイルが使用されconfig
ます。dev.js
ファイルの内容は次のとおりです。
最後になりましたが、私の HMR セットアップです。私は自分のindex.js
ファイルにこの設定をしました:
npm start build:dev
そのため、ブラウザで実行して にアクセスするhttp://localhost:3000
と、サイトが期待どおりに機能していることがわかります。これはコンソールの出力です:
test
テキストは、TodoApp
コンポーネントのrender 関数から取得されます。この関数は次のようになります。
だから、今重要なこと。このレンダー関数のリターンを更新します。これにより、HMR が開始されます。レンダー関数をこれに変更します。
これは、コンソールに表示される出力です。
これでいいと言うでしょう。しかし、私のサイトは何も更新しません。
次に、HMR コードを次のように変更しindex.js
ます。
そして、それは機能します。私はそれを理解していません。これが私の HMR コードである場合、なぜ機能しないのですか:
ところで、このセットアップはhttps://webpack.js.org/guides/hmr-react/のセットアップに基づいています
誰でも私を助けてくれることを願っています。さらに詳しい情報が必要な場合は、遠慮なくお尋ねください。前もって感謝します!
アップデート
.babelrc
ファイルを投稿するのを忘れていました。これです:
javascript - Hot Module Reload 後に Redux 状態から React コンポーネントが更新されない
反応コンポーネントをホットリロードするために、react-hot-loader 3.0.0-beta.6 を使用しています。リロード自体はうまく機能します-更新されたコンポーネントがすぐに表示されます。残念ながら、再読み込みが成功した後、アプリケーション内でアクションをディスパッチしても再レンダリングがトリガーされなくなり、アプリケーションを再び機能させるには完全に手動で更新する必要があります。ディスパッチされたアクションは redux ストアを更新しますが、コンポーネントは再レンダリングされません。
私が使用しているすべてのコンポーネントは、接続されたコンテナーとステートレス コンポーネントで構成されています。更新された状態をレンダリングしない理由は何ですか? どうすればデバッグを続行できますか?
MyComponent/container.js:
MyComponent/component.jsx:
成功した更新は次のとおりです。
main.jsx でレンダリングします。
webpack - HotModuleReplacement: __webpack_hmr が見つかりません
HotModuleReplacement を使用するとエラーが発生します。実際には使用できません__webpack_hmr
。見つかりませんと表示されます。
私はデフォルトでこの/node_modules/webpack-hot-middleware/client.js
構成を持っています:
しかし、自分の basedir の下に '__webpack_hmr' がありません。どこにあると思いますか、それはファイルですか? Brosersync、webpack、HMRを使用しようとして、かなり混乱しています。React Admin Panel をテストしているところですが、Github で作成者に応答なしで問い合わせました。助けてください。
これは私の webpack 設定の一部です:
Webpack hmr: __webpack_hmr 404 not foundのようないくつかのトピックは、意味のないソリューションを提供し、さらに私の場合とは異なります。
私はCluod9 IDEを使用しているため、ローカルホストがありません。どこかで手動でホストを定義する必要があります。