問題タブ [webpack-dev-server]

react-hot-loader と webpack を使用しています。また、高速バックエンドと一緒に webpack-dev-server も使用しています。

これは、開発用の関連する webpack 構成です。

この構成で、webpack と webpack-dev-server を起動します

したがって、webpack-dev-server は localhost:3000 で実行されapp.js、webpack ウォッチャーから受信します (ファイル システムに書き込まれなくなりました)。

私のエクスプレスサーバーはバックエンド/APIとして機能し、次の構成を持っています:

ここまでは問題なく、プロキシが機能app.jsし、ブラウザ コンソールにホット アップデートの成功メッセージが表示されます。

今、それはうまく見えますが、私が期待したようには機能しません:

1. コンポーネントの render() メソッドを変更すると、想定どおりに更新されますが、(render() で使用される) ヘルパー メソッドを変更すると、ホット アップデートが得られません。それは正常ですか？

2. 私がこのように作業し、ある時点で「ハード」ブラウザのリロードを実行すると、私が行ったすべての変更が webpack-dev-server を開始した時点に戻されます-その間のすべてのホットアップデートはどういうわけか永続化されていません。それも普通ですか？私は自分の状態を失うことを期待しますが、その間にコードに加えた変更はありません。これはおそらくapp.js、ファイル システムに書き込まれていないことに関係しています。

私は、テンプレートwebpackを使用して HTML/CSS をコーディングするための単純な構成をセットアップし、コーディング エクスペリエンスを高速化するためにHTML を提供しようとしています。jadePostCSShot reloadwebpack-dev-server

したがって、複数のエントリ ポイント、jadeインクルードを含むファイル、CSS、img、フォント、およびその他のアセットを用意します。

構成webpackの提案はありますか? ありがとう。

私は試してみましたがhtml-webpack-plugin、次のような設定で

動作していますが、ジェイド インクルードのホット リロードはなく、css/img/font アセットもありません。

それから私は見つけましindexhtml-webpack-pluginたが、HTMLファイルでのみ動作するようで、テンプレートはサポートされていません.

編集1:

今のところ、私はこれで終わったwebpack.config.js：

index.jsエントリ ポイントは次のようになります。

これは、現時点での HTML/CSS 開発の作業セットアップです。

すべての html、js、および css ファイルを Amazon s3 に保存し、API を介して安静なサーバーと通信する Web アプリを構築しようとしています。

遅延読み込みを実現しようとしており、おそらく反応ルーターでルーティングしています。webpack には、遅延読み込みと同様に機能するこの機能コード分割があるようです。

ただし、私が見つけたすべてのチュートリアルと例には、小さなノードの高速サーバーである webpack-dev-server が含まれています。とにかく、ビルド時にバンドルを生成し、すべてを amazon s3 にアップロードして、Angular の ocLazyLoading に似たものを達成できますか?

基本的な Laravel アプリケーションにwebpack-dev-serverを使用したいと考えています。公式の Webpack ドキュメントから、次のことを学びました。

開発中にバックエンド サーバーまたはそのモックを実行したい場合があります。webpack-dev-server をバックエンドとして使用しないでください。その唯一の目的は、静的 (webpacked) アセットを提供することです。

webpack-dev-server とバックエンド サーバーの 2 つのサーバーを並べて実行できます。

ページの下部に、それを達成する方法の例が示されています。私は従いましたが、2 つのエラー メッセージが表示されて行き詰まりました。これは、Webpack を Laravel アプリケーションに統合する試みです。

webpack.config.js

app.blade.php

コンソール出力:

...

ホームステッドを使用しています。アプリケーションはhttp://laravel.dev/で提供されます。私の質問は、2 つのサーバー (webpack-dev-server と backend-server) を並べて実行する方法です。私は何が欠けていますか？

適切な .scss ファイルのみをロードすることは可能ですか? 何らかの理由で、react コンポーネントがページで使用されていないにもかかわらず、.scss ファイルがまだ css に含まれています。

ソースマップも機能させたいので、現在 ExtractTextPlugin を使用しています。

webpack-dev-server をインストールできません:

そして私は得る：

Python をインストールする必要がありますか? どうすればそれを成し遂げることができますか？bufferutil パッケージに問題がありますか?

私はかなり単純なwebpack構成に問題があります:

私は自分のコードの縮小版をビルドしようとしていますが、実行している ときは dist フォルダーにNODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html何もなく、実行しているときは取得していますbundle.min.jshttp-server distUncaught Error: [HMR] Hot Module Replacement is disabled.

Web を調べたところ、これは一般的な問題であることがわかりましたが、これを修正する方法がどこにも見つかりませんでした--hot。ホットスワップ プラグインを追加することを想定したフラグを使用しています。

ember アプリで webpack HMR を実行しようとしています。私はまだ、ember 用の ember 固有のホットローダーを見つけていません。気にしないでください、私の問題は、css の変更のみがリフレッシュなしでホット ロードされることです。Java ファイルを変更すると、コンソールに次のように表示されます。

[WDS] App updated. Recompiling...

[WDS] App hot update...

[HMR] Checking for updates on the server...

[HMR] Updated modules:

[HMR] - 541

[HMR] App is up to date.

...HMR が機能しているようです。また、コンソール管理で更新されたモジュールのソース コードを見つけることができますが、その変更が Web ページに表示されず、理由がわかりません。

おそらく、モジュールがブラウザーのメモリで物理的に更新されているためですが、ember 環境では更新されていません。

それを機能させる方法はありますか？ありがとう。

webpack ビルドに問題があります。カスタム webpack 構成を作成します: https://github.com/Simproduction/react-client-webpack ですが、dev を実行するか、プロジェクトをビルドすると、すべて正常に動作しますが、コンソールから React を呼び出すことも、使用することもできません。反応する開発者ツール エラー が表示されUncaught ReferenceError: React is not defined(…) ます 助けていただけますか?

私のテストプロジェクト、 https://github.com/Simproduction/react-CM