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

Usage

The plugin can be installed with little-to-no configuration needed. Once installed, you can access the variables as expected within your code using process.env.

The example bellow shows the defaults, as well as a description of each parameter.

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

module.exports = {
  ...
  plugins: [
    new Dotenv({
      path: './.my.env', // if not simply .env
      safe: true // lets load the .env.example file as well
    })
  ]
  ...
};

Properties

Use the following properties to configure your instance.

• path ('./env') - The path to your environment variables.
• safe (false) - If false, just load the variables, if true, load the file in the sample property.
• sample ('./.env.example') - The sample file to use for validation.
• systemvars (false) - Set to true if you would rather load all system variables as well (useful for CI purposes).

LICENSE

MIT