Geek Answers Handbook

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

I am creating an isomorphic application. It is completely built with reaction, namely, the html base also reacts.

I have my root html as an application 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 create a project using webpack, I need to replace js / bundle.js with the inclusion of the hash.

Webpack provides the stats.json file after it is completed. But I need the hash to be available at build time.

I was thinking about using function 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;

That would ideally insert the correct hash link in the embedded js.

This is a little complicated because it is self-regulation. Is there a better way to do this? Changing the finished code after completing the web package seems counterproductive. I also thought that the client is simply requesting the bundle.js package, but my node server is serving the hashed file.

What would be the right solution for this caching?

+5
source share
3 answers

Instead of trying to display it in the application, I found that the best solution is to transfer webpack resources to the application. This can be either directly through the props, or through your stream.

This way your code is displayed with a variable. The value of the variable is not relevant to 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.

+4
source

ExtendedAPIPlugin adds the __webpack_hash__ variable to your set, which may be what you are looking for.

+7
source

You should not provide full HTML on the client, ever. Your head and everything that is outside your application div in the body, you just need to send from the server. Thus, your problem is immediately resolved, since your client-side Javascript does not need to know which file it lives in, and on the server you can just wait until the statistics are ready.

0
source

More articles:


All Articles