（1つのルート）ReactアプリケーションのHTML構造をHTMLエントリーポイントに直接生成する方法はありますか？初期静的React Webpackを使用したHTMLレンダリング
JSがロードされる前にページがHTML（React initial stateに基づいて）を表示できるようになります。
私は実際にwebpack-html-loaderを使用していますが、他のローダーまたはプラグインは大歓迎です;）
PS：static-site-generator-webpack-plugin任意の助けとすることができるの？
PS：私はあなたが、サーバ側のレンダリングを試してみてくださいリアクトルータ
を使用していないよ、それはバックエンドでアプリの最初のビューをレンダリングし、静的なHTMLをお届け反応するようになります。 This boilerplateは、既に設定して、次の引数を取るレンダリング機能をエクスポートWebPACKのbundle.jsとのバンドルを構築するための最初の必要性static-site-generator-webpack-pluginあなたを使用したい場合は、あなたがそれhere
確かに、私は完全な静的な方法（明示せずに）が必要です。初期HTMLレンダリングは、ビルド時（webpackを実行しているとき）に発生する必要があります。 –
についての詳細を学ぶことができるレンダリングサーバーが付属しています。
localsたとえば、さまざまなページメタデータを持つオブジェクト。 titleは、コンポーネントパラメータ（従来はテンプレート変数と考えられていました）に入ります。callbackあなたはresult例えばの値として、あなたのレンダリングされたHTMLを呼び出しますnodejsスタイル(err, result)コールバック
// entry.js, compiled to bundle.js by webpack
module.exports = function render(locals, callback) {
callback(null,
'<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
それはあなたのコンポーネントをインスタンス化する（したい場合は、ルータに反応おそらく経由）とReactDOMServer.renderToString()でそれらをレンダリングします。この機能です。
その後、StaticSiteGeneratorPluginのあなたのインスタンス化だけでなく、前述したメタデータ値を含むオブジェクトpaths中とlocalsであなたの具体的なルートでbundleとしてコンパイルさbundle.jsを指定します。あなたがwebpack.config.jsにlocalsに指定
var paths, locals; // compute paths from metadata files or frontmatter
module.exports = {
entry: {
bundle: './entry.js' // build bundle.js from entry.js source
},
...,
plugins: [
new StaticSiteGeneratorPlugin('bundle', paths, locals)
]
}
キーはrender(locals, callback)へのすべての呼び出しのlocalsパラメータ中に存在するであろう。プラグインによって提供されるpath,assetsおよびwebpackStatsキーとマージされます。
あなたは、一般的な方法でReactDOM.render()を呼び出して、あなたのWebPACKの設定に追加page.jsエントリをコンパイルし、その後に自分のrender(locals, callback)関数内で放出されるscriptタグにそのバンドルをロードすることができ、レンダリングした後、あなたのページにJavaScriptコードをロードする場合bundle.js（上記） page.jsは、entry.jsでレンダリングしたときと同じように、DOMの同じ場所にコンポーネントをマウントするようにしてください（おそらく親要素にid属性を設定します）。また、両方の環境で任意の場所（ルートパス）の従属変数が揃うようにする必要があります。
このプラグインも使用するGatsbyのソースコードを確認してください。代わりの方法として、Phenomicのソースコードを見ることもできます。
Jekyllはカスタムルビープラグインに拡張することができます偉大な静的サイトジェネレータです。 WebPackを有効にしてジキルを呼び出す必要があります。 Plugging Webpack to Jekyll Powered Pages
ここでは、作業例https://github.com/aganglada/preact-minimal/blob/master/config/webpack.config.jsがあります。好きな場合は、それをフォークして、どのように一緒に作業するかを見てください。
希望します。
サーバー側のレンダリングを試しましたか？ – Bezzi
@Bezziあなたはもっと明白なことができますか？ webpack.configを共有するのと同じように：Dビルド時に静的HTMLを生成する必要があります –
ページ全体が静的な場合にのみこれを行うことができます。 APIとの通信はありませんか？ – Fyre