使用Webpackcaching索引源代码中的值,使用React.js

我正在构build一个同构的应用程序。 它是完全用反应build立起来的 – 也就是说,html基础也在起作用。

我有我的根html作为一个应用程序组件。

它看起来像这样:

... var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title> <link rel="stylesheet" href='/css/style.css' /> </head> <body> <RouteHandler {...this.props}/> <script type='text/javascript' src='/js/bundle.js' /> </body> </html> ); } }); ... module.exports = AppTemplate; 

当我使用webpack构build项目时,我需要replacejs / bundle.js来包含哈希。

Webpack在完成后提供stats.json。 但是我需要在构build期间提供散列。

我正在考虑使用function标志来做这样的事情:

 ... var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title> <link rel="stylesheet" href='/css/style.css' /> </head> <body> <RouteHandler {...this.props}/> <script type='text/javascript' src='/js/bundle.{__HASH__}.js' /> </body> </html> ); } }); ... module.exports = AppTemplate; 

哪个理想情况下将正确的散列引用注入到构build的js中。

这是有点棘手,因为它是自引用。 有没有更好的方法来做到这一点? webpack完成后修改内置的代码似乎适得其反。 我也想过让客户端简单地请求bundle.js,但让我的节点服务器服务散列文件。

什么是适当的解决这个caching?

       

网上收集的解决方案 "使用Webpackcaching索引源代码中的值,使用React.js"

ExtendedAPIPlugin将一个__webpack_hash__variables添加到您的包中,这可能是您正在查找的内容。

我没有试图在应用程序中呈现它,而是发现最好的解决scheme是将webpack资源传递到应用程序中。 这可以直接通过道具或通过你的stream量。

这样你的代码就会被渲染成一个variables。 您的variables的值与构build过程无关。

 ... var AppTemplate = React.createClass({ displayName: 'AppTemplate', render: function() { return ( <html> <head lang="en"> <title>hello</title> <link rel="stylesheet" href='/css/style.css' /> </head> <body> <RouteHandler {...this.props}/> <script type='text/javascript' src={this.props.jsFile} /> </body> </html> ); } }); ... module.exports = AppTemplate; 

就是这样

您不应该在客户端上呈现完整的HTML。 你的头和身体之外的应用程序div的一切都应该从服务器发送。 这样,你的问题就马上解决了,因为你的客户端Javascript并不需要知道它所在的文件是什么,在服务器上你可以等待数据准备就绪。