Programatically make the index.html from a React project to include the version number from package.json

Question

The problem I am trying to solve when I deploy a new build, the users need to get the latest bundle.js and bundle.css, not the browser cached one. The solution the problem is appending a query string to the filename like /client.bundle.js?v=1.01. The 1.01 comes from the package.json's version property.

The content of the index.html, which is contained in the public folder is below. How do I configure the webpack to modify the index.html automatically when building?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Loading...</title>
  <meta name="viewport"
    content="width=device-width,user-scalable=no,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/client.bundle.css">
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
  </script>
</body>
</html>

Zoe - Save the data dump · Accepted Answer · 2018-06-08 12:07:32Z

3

In Webpack build system you can use something like this:

const VERSION = JSON.stringify(require('./package.json').version)

And make this available on window object via Webpack's DefinePlugin

new webpack.DefinePlugin({__VERSION : VERSION})

Which you can use later in index.html file or if you use any templating language.

edited Jun 8, 2018 at 12:07

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Jun 8, 2018 at 11:56

Arpit Goyal

1,00512 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Programatically make the index.html from a React project to include the version number from package.json

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related