Max RozenMax Rozen
TwitterArticlesNewsletter

How do you use variables in the HTML webpack outputs?

Through the use of html-webpack-plugin you can inject variables into the HTML your webpack build generates - no more hardcoding!

Here’s how you use it:

First, run yarn add -D html-webpack-plugin or npm install --save-dev html-webpack-plugin

Then, add the following to your webpack config:

/* webpack.config.js */
const HtmlWebpackPlugin = require('html-webpack-plugin');
// rest of your config
plugins: [
  new HtmlWebpackPlugin({
    template: 'index.tmp.html',
    filename: 'index.html',
    templateParameters: {
      some_variable: process.env.SOME_VAR,
    },
  }),
];

index.tmp.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title><%= some_variable %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

In order for process.env.SOME_VAR to have a variable, you can either use a .env file, or enter the values as part of your CI’s configuration (services such as CircleCI and Netlify support this).

Remember that variables injected this way are visible to your users!

Do you struggle to keep up with best practices in React?

I send a single email weekly with an article like this one to help improve the quality of your React apps. Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 158 React developers who signed up last month!

    rssTwitterGitHub

    © 2020 Max Rozen. All rights reserved.