blog/using-environment-variables-with-webpack/

[utterances-bot]

Using environment variables with Webpack

A guide for setting up and using environment variables with Webpack and handling different values for Production and Development environments.

https://prateeksurana.me/blog/using-environment-variables-with-webpack/

[raquelhortab]

This is not working anymore with webpack 5 right? it does not allow accessing process so it throws process is not defined anytime you try to access process.env

Using

new webpack.ProvidePlugin({
      process: 'process/browser',
    }),

allows accessing process but env is empty. And if combined with dotenv, then process does not work at all

[carlospence]

I Changed the way the path is configured and it worked and am using webapack 5

/ webpack.config.js ...

module.exports = env => ({ ... plugins: [ new Dotenv({ path: ./.env.${env.production ? "production" : "development"} }), ... ] ... });

[rbluer]

Prateek,

Thanks greatly for your article! I've been looking for a clean way to do exactly what you wrote about for the longest time and I've had nothing but problems with all of the suggestions in one way or another. But as soon as I hooked up the dotenv-webpack plugin, as you suggested, all of the errors I was encountering were gone and my code was able to finally able to connect to the various back end APIs. It's working great with webpack 5.

Basically I was handed an old project that was not working, and it was using 3 to 4 year old version of everything; upgrading to webpack 5 and all of the latest versions of node.js and react and kept hitting a wall with getting the .env.development settings to work within the express & webpack-dev-middleware environments when running in the browsers.

[1ucasdev]

Thanks for the detailed information! So far I’ve figured out how to make an calculator that keeps track. I will continue to learn new technologies. Thank you!

[codebycarlos]

Finding clear information on setting up environment variables for an electron distributable has not been easy. This article is an absolute godsend. Thank you.