我正在构建同构应用程序。它完全由React构建 - 即，HTML碱也在React中。
我将根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构建项目时，我需要替换js/bundle.js以包括哈希。
webpack完成后提供stats.json。但是我需要在构建时间内提供哈希。
我正在考虑使用功能标志来执行以下操作：
...
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;
理想情况下将正确的哈希参考注入构建的JS。
这有点棘手，因为它是自我引用。有更好的方法吗？WebPack完成后修改构建代码似乎适得其反。我还考虑过让客户端仅请求bundle.js，但我的节点服务器服务于Hashed文件。
该缓存将有什么适当的解决方案？
ExtendedAPIPlugin在捆绑包中添加了一个 __webpack_hash__变量，这可能是您要寻找的。
而不是试图在应用程序中渲染它，我发现最好的解决方案是将WebPack资产传递到应用程序中。这可以直接通过道具，也可以是通过您的通量。
这样，您的代码被变量渲染。您的变量的价值与构建过程无关。
...
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。您的头部和主体中应用程序外部的所有内容都应从服务器中发送。这样就可以立即解决您的问题，因为您的客户端JavaScript不需要知道其居住在哪个文件中，并且在服务器上您可以等待统计信息准备就绪。