問題タブ [webpack-isomorphic-tools]

React とそれを中心に構築された環境全体を学ぼうとしています。私は自分の開発スタックを構築しようとすることでそれを行います。

非常に長い間解決できなかった問題は、サーバー レンダリングの能力を失わずに CSS/画像を提供する方法です。

いくつかのチュートリアルを読み、webpack-isomorphic-toolsを発見しました

私はそれらを構成し、サポートされている画像、sass (css に変換されたもの) も取得することができました。

ただし、webpack-assets.jsonファイルが生成されず、代わりにこの出力が表示されるという問題に遭遇しました。(このコミットの前に の 2 回目の実行で生成することができましたnpm startが、それは間違いなく進むべき道ではありませんでしたが、ファイルが存在する場合にプラグインが機能することが示されました。)

このファイルの目的は理解できますが、生成されない理由がまったくわかりません。

不足しているものはありますか？関連するファイルとリポジトリは次のとおりです

• https://github.com/jvorcak/universal-react-kit/tree/sass-loaderuniversal-react-kit (リポジトリ の sass-loader ブランチ)
• 設定 - https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack-isomorphic-tools-configuration.js
• webpack.config.js - https://github.com/jvorcak/universal-react-kit/blob/sass-loader/webpack.config.js
• サーバー実行時のエントリファイルhttps://github.com/jvorcak/universal-react-kit/blob/sass-loader/src/server/index.js

誰かが何が起こっているのか説明してもらえますか、私はドキュメントやブログを読みましたが、ここに何かが欠けています. ありがとうございました。

私はmovies.jsファイルを持っています。

コンポーネントでは、動的に使用します。すべて正常に動作します。しかし、最終的に次のようになる webpack でビルドを作成すると:

そしてindex.htmlは

バンドル js に画像への参照がある場合、エディタを使用してブラウザで html ファイルを開くと、コンソールに次のように表示されます。

コンソールにエラーは表示されず、コンソールにあるこのハッシュへの参照がバンドルにあることがわかります。結果は空白の正方形のみです。

私が理解しているように、画像は見られ、ロードされ、ハッシュされ、参照されています...なぜ表示されないのですか?

webpack の構成は次のとおりです。

助けてください、私は構成とルートをたくさん試してみましたが、それでも成功せず、アイデアが不足していました。

ところで。静的に動作できますか? それとも、index.html と ./bundle.js が添付されたブラウザでこれを起動することは不可能でしょうか? または、バンドルに含める必要がある他の追加のマップファイルを生成する必要がありますか?

webpack-isomorphic-tools反応同形アプリを開発しようとしていますが、最近npm パッケージを思いつきました。
ドキュメントに従おうとしましたが、残念ながら画像とスタイル ファイルが認識されず、webpack-assets.jsonファイルに追加されません。

今まで私はこの方法を使用してきました：

しかし、webpack-isomorphic-tools の方が有益であることがわかりました。

scss およびその他のスタイル ファイルの場合、これはサーバーの実行時に表示されるエラーです。

イメージ ファイルの場合、ビルドでイメージが検出されないため、ビルド中にエラーは表示されません。ここにあるwebpack-assets.js：

関連コード:
webpack-isomorphic-tools-config.js:

index.js (ドキュメントのものとよく似ています):

webpack.dev.js (webpack-dev-server 構成):

webpack.config.js :

さらにコードが必要な場合は、喜んで提供します。ありがとう!

同形アプリの開発について読んだことがあり、サーバー側でアセットの読み込みを処理する方法を見てきました。
1 つはwebpack-isomorphic-toolsです。
もう 1 つは、webpack で process.env.BROWSER を true に設定するプラグインを定義し、その変数に従ってアセットをロードするこの「ハック」です。すなわち:

どちらが優れているのか、その理由を知りたいと思いました。

「ユニバーサル」アプリ (react-router、redux、webpack - 主にhttps://github.com/erikras/react-redux-universal-hot-exampleに基づく) でコード分割の実装を開始しました。

コード分​​割が実装されている (唯一の) ルートで、ブラウザーを完全に更新すると、次の React エラー メッセージが表示されます。

コード分​​割を無効にすると、エラー メッセージは表示されなくなります。これは、Javascript チャンクが Webpack ローダーによって読み込まれる前に React が最初のレンダリングを行ったためであると推測しています。そのため、サーバーで生成されたものとは異なるマークアップが生成されます。あれは正しいですか？

• エラーメッセージについて心配する必要がありますか?
• このメッセージが発生した正確な時間に React が何をレンダリングするかを把握する方法はありますか?
• メッセージを消すための修正はありますか? (コード分割を使用しない以外)

私はバックエンドとしてのみレールを初めて使用します。そして、react/redux/rails アプリの開発を計画しています。

私の質問は、反応コンポーネントをマウントできるように、ブラウザのリクエストが来たときに少なくとも index.html をレンダリングするにはどうすればよいですか?

または、私の場合、レールをAPIとしてのみ使用しないでください。

ありがとう。