初始靜態React HTML渲染與Webpack

有沒有一種方法可以直接在HTML入口點預生成（單一路由）React應用程序的HTML結構？初始靜態React HTML渲染與Webpack

然後，在加載任何JS之前，頁面將能夠顯示HTML（基於React初始狀態）。

我實際使用webpack-html-loader但任何其他裝載機或插件是歡迎;）

PS：可能static-site-generator-webpack-plugin幫上什麼忙？

PS：我不使用路由器做出反應

來源

2017-02-02 Yves M.

您是否嘗試過服務器端渲染？ – Bezzi

@Bezzi你能更明確嗎？就像共享webpack.config一樣：D我需要在編譯時生成靜態HTML –

如果整個頁面是靜態的，那麼只能這樣做。沒有與API溝通？ – Fyre

你應該嘗試服務器端渲染，它會讓反應呈現在後端你的應用程序的第一個視圖，並提供一個靜態的HTML。 This boilerplate已經自帶了服務器的渲染設置，你可以瞭解更多有關它here

來源

2017-02-04 03:33:07 Bezzi

當然，但我需要一個完全靜態的方式（沒有表達）..初始HTML渲染應該發生一個，在構建時（當運行webpack）..任何示例共享？ –

如果你想使用static-site-generator-webpack-plugin首先需要構建具有的WebPack bundle.js一個捆綁出口渲染函數，有以下參數。

locals具有各種頁面元數據的對象，例如，進入組件參數（傳統上認爲是模板變量）的title。
callback一個風格的NodeJS回調(err, result)，你將與你的渲染HTML作爲價值呼籲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.js爲bundle。

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) 
    ] 
}

你webpack.config.js在指定locals鑰匙將出現在每次調用render(locals, callback)的locals參數。它們將與插件提供的path，assets和webpackStats鍵合併。

如果你想使你可以編譯附加page.js進入到你的WebPack的配置，在通常的方式調用ReactDOM.render()然後加載束在由您render(locals, callback)功能發出的script標籤後加載JavaScript代碼到您的網頁你的bundle.js（上圖）。確保page.js將組件安裝到DOM中的相同位置，與通過entry.js呈現時（您可能會在父元素上設置id屬性）相同。您還需要確保任何位置（即路徑路徑）相關變量都在兩種環境中對齊。

查看也使用此插件的Gatsby的源代碼。您還可以查看Phenomic的源代碼以獲取其他方法。

來源

2017-02-18 11:56:54

Jekyll是偉大靜態站點生成可與定製紅寶石插件進行擴展。您需要啓用WebPack才能撥打Jekyll來電。請參閱Plugging Webpack to Jekyll Powered Pages

來源

2017-02-25 08:59:22 SACn

在這裏，您有一個工作示例https://github.com/aganglada/preact-minimal/blob/master/config/webpack.config.js，如果您喜歡，您可以將其分開並查看這些工作如何結合在一起。

希望它有幫助:)

來源

2017-02-25 10:13:03

初始靜態React HTML渲染與Webpack

回答

相關問題