Caching with Webpack, [hash] value inside index source code, using React.js

问题

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?

回答1:

The ExtendedAPIPlugin adds a __webpack_hash__ variable to your bundle, which might be what you're looking for.

回答2:

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.

回答3:

You shouldn't be rendering your full HTML on the client, ever. Your head and everything outside your app div in body should just be sent from the server. That way your problem is solved right away, as your client-side Javascript doesn't need to know what file it lives in, and on the server you can just wait for the stats to be ready.

来源：https://stackoverflow.com/questions/30310951/caching-with-webpack-hash-value-inside-index-source-code-using-react-js

标签

node.js

caching

reactjs

Webpack

isomorphic-javascript