ここで webpack.config.js ファイルで私が間違っていることを誰かが見ていますか? ブラウザに「予期しないトークン 'インポート'」というエラーが表示されます。これは、ES6 構文を認識していないことを意味します。ローダーに何か問題がありますか？依存関係を何度もインストールして再インストールしたので、そこに問題があるとは思いません。

webpack.config.js

反応ホット webpack ローダーを正しく動作させるのに少し問題があります。

ページをロードすると、期待どおりに次のようになります。

[HMR] WDS からの更新信号を待っています...
[WDS] ホット モジュール交換が有効になりました。

しかし、変更を保存すると、ページは (HMR の置き換えではなく) ブラウザーを自動的にハード リフレッシュします。

指図：webpack-dev-server --hot --inline

興味深いことに、babel-preset-react-hmreすべてを使用すると期待どおりに機能します。（ただし、適切な反応ホットローダーよりもサポートが少ないように見えるため、これは実際には使用したくありません）。

webpack に友達になるチャンスを与えようとするたびに、webpack で問題が発生します。今回は、react-hot-loader、webpack、webpack-dev-server で Hot Module Reloading を有効にしようとしていますが、webpack-dev-server がブラウザで間違った URL を取得しようとしているようです。

これは、Chrome v50 のコンソールからのエラーです。

完全なログ:

これが私のwebpack構成です：

プロジェクトで hot-react-loader を使用しようとしています。そのため、これで動作するようにいくつかのファイルを変更しましたが、コンポーネントを編集するとエラーが発生します。

警告: React.createElement: type は null、undefined、boolean、または number であってはなりません。文字列 (DOM 要素の場合) または ReactClass (複合コンポーネントの場合) である必要があります。

[HMR] アップデートを適用できません。フルリロードが必要です！

私は何を間違っていますか？

webpack.config.dev.js

サーバー.js

index.js

app.js

私はいくつかのフロントエンドを学ぶことに決めたバックエンドの男ですが、環境を構成することさえできないので、学ぶにはほど遠いようです。

私の目標は、Babel 6、React、react-hot、および HotModuleReplacementPlugin を使用して Webpack をセットアップすることです。また、アプリに Express.js サーバーが必要です。だからここに私の設定があります：

サーバー.js:

webpack.config.js

public/index.html

src/App.js

src/index.js

そして、これが私のコンソールにあるものです（エラーはループしています）：

Webpack と React Hot Loader v3 を使用しています。開発中は、ほとんど期待どおりに動作しています。ただし、静的バンドルファイルを出力すると、ホットロード機能が無効になると予想していました

webpack --progress -p

しかし、代わりに得られるのは、この種のエラーが繰り返されることです。

これは私の Webpack 構成です。

を無効にしてみてくださいという提案を受けましたHotModuleReplacementPlugin()が、それでも同じエラーが発生します。ここで何が欠けているかについてのアイデアはありますか?

react-hot-loaderWindows 7 では (ほとんどの場合) ファイルの保存時に更新されません。Mac でまったく同じコードを試してみたところ、毎回動作します。

潜在的な問題を検索しましたが、何も見つかりませんでした。

ファイル変更の OS レベル通知を実行するときに、Windows に癖がありますか?

これを解決するためのアイデアはありますか？

Rails アプリで React と webpack 用の react-hot-loader プラグインを使用して Webpack をセットアップしました。それは正常に機能bundle.jsし、私が期待しているファイルを構築していますが、すべてのホットアップデートでこのようなファイルも提供しています0.bfeb31eda5c7e8da9473.hot-update.js。私が使用しているプラ​​グインの 1 つの作成者は、プロパティでファイルを監視しないようWriteFileWebpackPluginに指示できると言いましたが、それを機能させる方法がわかりません。test.hot

これが私のwebpack.config.jsです

他の誰かがこれに遭遇しましたか？可能であれば、プロパティなしでこれを解決できるかどうかをtest把握したいのですが、それを把握するだけでも役立ちます。

私はreact/reduxアプリに取り組んでおり、ポート：3000でnpmパイプされたhapi.jsバックエンドとポート：3001で実行されているwebpack-dev-serverでローカルに提供されています。

静的ファイルを提供するための API ルートがいくつかあり、{param*} ルールを使用して build/public ディレクトリからアセット ファイルをヒットします。それを機能させるために、WebpackDevServer にリクエストをポート 3000 に転送するプロキシがあります。

CSSModulesのビルドを実行しています。scss、他にもいくつかのローダーが配置されています。

これを最初に設定したとき、期待どおりに機能しました。ファイルを追加し、コンテンツを保存し、ビルドを実行すると、HMR がその役割を果たし、dom を更新します。うまくいきました。ある時点で、これはうまく機能しなくなりました。:3000 のバックエンドは再構築とリロードを行いますが、:3001 のフロントエンドは次のようなエラーを受け取ります。

そこに :8080 への参照があることに気付きました (webpack-dev-server のデフォルト) が、私の参照はすべて :3000/1 です。

このスタックがうまく機能している場合、server.js を保存すると、hapi サーバーが (npm パイピングにより) 自動的に再起動し、webpack のビルドが期待どおりに進みます。現在、server.js からビルドが断続的に失敗し$ webpackています。ビルドと正常な更新をトリガーするには、ブラウザーを手動でリロードする必要があります。これは明らかにポイントを打ち負かしています。

重要なビット:

サーバー.js

webpack.config.js

すべての設定をいじっていたので、機能していたものを変更した可能性があります。しかし、これは期待どおりに機能するはずです。

この構成スタックへの洞察をいただければ幸いです。プロジェクトソース：github

一番 -

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 が機能しません。もちろん、コンテナ内のファイルを編集するときはうまく機能します。