使用Webpack进行缓存，使用React.js在索引源代码中添加[hash]值 [英] Caching with Webpack, [hash] value inside index source code, using React.js
问题描述
我正在构建同构应用程序。
它是完全由react构建的-即html库也包含在react中。
I'm building an isomorphic application. It is completely built with react -- namely, the html base is also in react.
我将根html用作应用程序组件。
I have my root html as an app component.
看起来像这样：
...
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以包括哈希值
When I build the project with webpack, I need to replace js/bundle.js to include the hash.
Webpack在完成后交付stats.json。但是我需要在构建期间有可用的哈希。
Webpack delivers the stats.json after it is finished. But I need to have the hash available during build time.
我当时正在考虑使用功能标志来做类似的事情：
I was thinking of using the feature flags to do something like:
...
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中。
Which would ideally inject the right hash reference into the built js.
由于它是自引用的，因此有点棘手。有更好的方法吗？在webpack完成后修改构建的代码似乎适得其反。
我还考虑过让客户端简单地请求bundle.js，但是让我的节点服务器提供哈希文件。
It's a bit tricky since it is self referencing. Is there a better way to do it? Modifying the built code after webpack has finished seems counterproductive. I've also thought about having the client simply request bundle.js, but have my node server serve the hashed file.
什么是合适的解决方案
推荐答案
而不是尝试在应用程序中呈现它，我发现最好的解决方案是传递Webpack资产进入应用程序。
Instead of trying to render it in the app, I found the best solution is to pass the webpack assets into the app. This can be either directly through props or through your flux.
这样，您的代码将使用变量呈现。变量的值与构建过程无关。
That way your code is rendered with a variable. The value of your variable is irrelevant for the build process.
...
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;
类似的东西。
这篇关于使用Webpack进行缓存，使用React.js在索引源代码中添加[hash]值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
