Menu
I'm building an isomorphic application. It is completely built with react -- namely, the html base is also in react.
I have my root html as an app component.
It looks something like this:
...
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;
When I build the project with webpack, I need to replace js/bundle.js to include the hash.
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;
Which would ideally inject the right hash reference into the built 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.
What would be a proper solution to this caching?
942
The ExtendedAPIPlugin adds a __webpack_hash__ variable to your bundle, which might be what you're looking for.
89
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;
Something like that.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With