Dotenv | webpack

The dotenv option enables webpack's built-in environment variable loading from .env files.
Enable and configure the built-in Dotenv plugin to load environment variables from .env files.
Setting dotenv to true enables the plugin with default options. For custom configuration, pass an options object:
Only expose environment variables that start with the specified prefix(es). This prevents accidental exposure of sensitive variables.
For security reasons, an empty string '' is not allowed as a prefix, as it would expose all environment variables.
Default: the compiler context
The directory from which .env files are loaded.
Default: ['.env', '.env.local', '.env.[mode]', '.env.[mode].local']
Template patterns for .env file names. Use [mode] as a placeholder for the webpack mode (e.g., development, production).
Files are loaded in the order specified, with later files overriding earlier ones.
The [mode] placeholder will be replaced with the current webpack mode. For example, in production mode, .env.[mode] becomes .env.production.
Environment files are loaded in order, with later files having higher priority:
Variables from later files override those from earlier files. Additionally, variables already set in process.env take the highest priority.
Environment variables are automatically expanded using the dotenv-expand syntax:
During expansion, you can reference any variable from process.env (e.g., ${PORT}), but only variables with the specified prefix (e.g., WEBPACK_) will be exposed in your final bundle. In the example above, ${WEBPACK_PORT:-3000} references WEBPACK_PORT from process.env if it exists.
Expansion behavior example:
Result: process.env.WEBPACK_API_URL will be "https://custom.com/api" because API_BASE from process.env is used during expansion, even though API_BASE itself won't be exposed in the bundle (it lacks the WEBPACK_ prefix).
Create a .env file in your project root:
In your application:
Create mode-specific files:
When building with --mode production, WEBPACK_API_URL will be "https://prod-api.example.com".
Expose variables with different prefixes:
Load environment files from a custom location with custom naming:
Never commit sensitive data to version control!
Copyright OpenJS Foundation and webpack contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | Bylaws | Code of Conduct | Trademark Policy | Trademark List | Cookie Policy