dotenv-webpack

What is dotenv-webpack?

The dotenv-webpack npm package is a plugin for webpack that automates the loading of environment variables from a .env file into process.env, providing an easy way to configure your application's environment-specific variables. It wraps dotenv and Webpack.DefinePlugin under the hood.

What are dotenv-webpack's main functionalities?

Load environment variables

Automatically loads environment variables from a .env file and makes them available in your application through process.env.

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

module.exports = {
  //... other webpack config
  plugins: [
    new Dotenv()
  ]
  //... other webpack config
};

Custom .env file path

Allows you to specify a custom path to your .env file if it's not located in the root directory.

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

module.exports = {
  //... other webpack config
  plugins: [
    new Dotenv({
      path: './some/other/path/.env'
    })
  ]
  //... other webpack config
};

Safe mode

Enables safe mode to ensure that all necessary environment variables are defined, by comparing with a template file (usually .env.example).

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

module.exports = {
  //... other webpack config
  plugins: [
    new Dotenv({
      safe: true // load '.env.example' to check all necessary variables are defined
    })
  ]
  //... other webpack config
};

System variables

Allows the inclusion of system environment variables in the webpack build in addition to the variables from the .env file.

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

module.exports = {
  //... other webpack config
  plugins: [
    new Dotenv({
      systemvars: true // load all system environment variables in addition to .env file
    })
  ]
  //... other webpack config
};

Other packages similar to dotenv-webpack

env-cmd

env-cmd is a simple node program for executing commands using an environment from an env file. It's not a webpack plugin but can be used in conjunction with npm scripts to achieve similar results.

cross-env

cross-env allows you to set and use environment variables across platforms without worrying about platform-specific issues. It's not a webpack plugin but can be used in npm scripts to manage environment variables.

README

dotenv-webpack

A simple webpack plugin to support dotenv.

Status

Installation

Include the package locally in your repository.

npm install dotenv-webpack --save

Basic Usage

The plugin can be installed with little-to-no configuration needed.

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv({
      path: './.env', // can be ommitted as this is the default
      safe: false, // make true to use dotenv-safe and require variables
      sample: './.env.example', // if safe=true, use this to define the safe env
      systemvars: false // if true, also loads system env variables
    })
  ]
  ...
};

LICENSE

MIT