使用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？
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并不需要知道它所在的文件是什么，在服务器上你可以等待数据准备就绪。