Yve*_* M. 10 reactjs webpack webpack-html-loader
有没有办法直接在HTML入口点预生成(单个路由)React应用程序的HTML结构？
然后,在加载任何JS之前,页面将能够显示HTML(基于React初始状态).
我实际上正在使用webpack-html-loader,但欢迎任何其他加载器或插件;)
PS:可以使用static-site-generator-webpack-plugin吗？
PS:我没有使用React Router
如果你想使用static-site-generator-webpack-plugin,你首先需要使用webpack构建一个bundle,bundle.js它导出一个带有以下参数的render函数.
locals具有各种页面元数据的对象,例如title,进入组件参数(传统上被认为是模板变量).callback(err, result)您将使用渲染的html作为值调用的nodejs样式回调result例如
// entry.js, compiled to bundle.js by webpack
module.exports = function render(locals, callback) {
callback(null,
'<html>' + locals.greet + ' from ' + locals.path + '</html>');
};
在此函数中,您将实例化组件(如果需要,可以通过React Router)并使用它们进行渲染ReactDOMServer.renderToString().
然后,您将指定编译bundle.js为bundle您的实例StaticSiteGeneratorPlugin,以及在你的具体路线paths,并在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)
]
}
您指定的键locals在webpack.config.js将存在于locals每个调用的参数render(locals, callback).他们将被合并path,assets并webpackStats通过插件提供的密钥.
如果你想在渲染后将javascript代码加载到你的页面中,你可以编译一个额外的page.js条目到你的webpack配置,ReactDOM.render()以典型的方式调用,然后将该包加载到script你的render(locals, callback)函数中发出的标记中bundle.js(上图).确保将page.js组件安装到DOM中与呈现时相同的位置entry.js(您可能会id在父元素上设置属性).您还需要确保任何位置(即路径路径)因变量在两个环境中都对齐.
查看Gatsby的源代码,该代码也使用此插件.您还可以查看Phenomic的源代码以获得替代方法.
| 归档时间： |
|
| 查看次数： |
2862 次 |
| 最近记录： |