How to pass webpack environment variables in HTML

Today we will show you how to pass webpack environment variables in HTML.

Let’s assume that you have created the react application using the webpack and you want to pass the environment variables in the HTML file so you can use the html-webpack-plugin npm plugin to inject the variable to the HTML file.

If you are using the webpack.DefinePlugin(...) then you can directly access it in the HTML file with minor changes.

Use the following code snippets to access the variables in the HTML file.

Try to exclude the .html by setting the exclude option.

Your config file should look like below.

webpack.config.js
Once you have made all the above configurations in the webpack.config.js file, we can use the following syntax (<%= foo %>) in the HTML file to access the variables.

Only these changes are required to access the env variables in the HTML file.
Thank you for reading. Happy Coding..!! 🙂

If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *