問題タブ [webpack-hmr]

コードが HMR でリロードされないという問題があります。CLI webpack dev サーバーを使用しています。変更が表示され、webpack が再コンパイルされますが、サイトはリロードされません。

コンソール ログ:

このエラーは、挿入された Webpack コードの一部です。

私のコードは基本的にこれです: https://github.com/jaredpalmer/react-production-starterを除いて、Koa2 に切り替えました。途中、さまざまな理由でビルドイン HMR を使用できなかったので、現在は外部サーバーに頼っています。

私の設定：

次のように webpack サーバーを呼び出します。

問題は何ですか？webpack が解析する無効な情報を受け取っているようですが、それが何を想定しているのか、何から来ているのかわかりません。

クライアントの index.js ファイルはこちらと同じです。

最初のレンダリングを提供するコードを再配置しましたが、非常に似ています。元のサーバー コードは次のとおりです。主に、私はそれをキャッチオールルートrouter.all('*')に変え、html を少し変更しましたが、ほとんどの部分は同じです。スクリプトタグは次のとおりです。

client/index.jsファイルの下部にこれが含まれています：

ただし、呼び出されることはありません。

誰かが光を当てることができますか？

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

HTML の自動ページ更新に Browsersync を使用し、ページ全体をリロードせずに CSS を変更すると機能します。また、変更を適用し、入力テキストなどの要素の状態を永続的に維持するために上部にページングすることもありません。

Webpack のホット モジュール リロード機能で、Browsersync ではできないが、Browsersync ではできない特定のユース ケースと特定のフレームワークを使用したプロジェクトで、より優れた便利な機能はありますか?

新しく生成された react-boilerplate プロジェクトに依存関係を追加するのに苦労しています。私はこのエラーに直面しています：

この依存関係を次のように package.json に追加した後:

app/containers/App/index.js などの既存の index.html

index.js から import ステートメントを削除すると、エラーは消えます。

何が起こっているのかわからないので、どんな提案でもいただければ幸いです。

詳細:

このリポジトリのクローンを作成し始めました:

https://github.com/mxstbr/react-boilerplate

次に、npm run setup を実行しました。次に、フェザークライアントに依存関係を追加すると、エラーが発生します。

request、feathers-rest、request-promise などの依存関係を追加すると、同様のエラーが発生することにも言及する必要があります。

bluebird などの依存関係を追加すると、エラーに直面しません。

このエラーが発生する依存関係の明確なパターンは見つかりませんでした。

angular2-webpack-starter( https://github.com/AngularClass/angular2-webpack-starter )の指示に従うと、次のコマンドを実行すると、インクリメンタル ビルド中に重大なパフォーマンスの問題が発生します。

npm run server:dev:hmr

最初のビルドには約 30 秒しかかかりませんが、インクリメンタル ビルドの更新を開始するためにファイルの 1 つに触れると、最初のビルドよりも時間がかかります。

アプリにコンテンツを追加すると、この遅延はさらに悪化し、「アセットの最適化」の部分だけで 2 分を超えます。

devtoolオプションを効果なしに変更しようとしました。

ここにいくつかの環境情報があります：

• Windows 7 プロ、64 ビット
• angular2-webpack-starter@5.0.5
• ノード v4.4.3
• npm 3.10.2

TypeScriptで記述されたNodeJSプロジェクトでWebpack HMRを有効にしたいと考えています。

しかしmodule.hot、利用できません:

• @types/webpack-envは以下を定義します:

  /li>

• @types/node定義と競合するもの:

  /li>

@types/nodeを削除すると、問題は解決しますが、無効になりますprocess: