dotenv-webpack use environment variable in webpack.config.js

Question

My .env is set up like this:

SECRET_KEY=mysecretkey123

My webpack.config.js is set up like this:

const Dotenv = require('dotenv-webpack');

module.exports = {
...
proxy: {
 'api': {
   target: 'foo.bar'
   headers: {'api_token': process.env.SECRET_KEY}
  }
}
...
plugins: [
    new Dotenv({
      path: '.env',
    }),
]

}

However when I run my app I get an error saying that my api token is undefined

I know dotenv is working properly, because within my application itself I can do console.log(process.env.SECRET_KEY) and see my secret key, however it appears this does not expose my environment variables within my webpack.config.js file itself.

Is there a way to configure dotenv-webpack to allow the use of environment variables within the webpack.config.js?

Answer 1

If you want to use variables from your .env file in the webpack.config.js directly, understand that it behaves just as any other javascript file while being run, so you need to use the dotenv package directly in the config file, not the dotenv-webpack plugin, which inserts the variables into your bundled code.

I.e, just npm install dotenv and add require('dotenv').config() to the top of your webpack.config file.