webpack-env

0.8.0 verified Sat Apr 25 auth: no javascript maintenance

Webpack plugin that makes variables from a .env.js file available as global constants in your webpack bundles. Version 0.8.0 (latest) – no recent updates, low maintenance. Key differentiator: simple environment variable injection without additional loaders. Alternatives like dotenv-webpack offer more features and active support.

Common errors

error TypeError: webpackEnv is not a constructor ↓

cause Using new webpackEnv() when plugin should be passed directly.

fix

Use plugins: [require('webpack-env')] instead of plugins: [new require('webpack-env')]

error Module not found: Error: Can't resolve 'fs' in ... ↓

cause webpack-env uses Node.js fs module; incompatible with webpack 4+/5 in browser environment.

fix

Not recommended for browser-only build; use dotenv-webpack or DefinePlugin.

error ReferenceError: SOME_VAR is not defined ↓

cause .env.js not being loaded or exported incorrectly.

fix

Create .env.js in project root with module.exports = { SOME_VAR: 'value' }

error Warning: webpack-env plugin: .env.js file is missing ↓

cause No .env.js file found in project root.

fix

Create .env.js file in the root directory containing module.exports = { ... }

Warnings

gotcha Plugin is used directly without instantiation (new) – passing the required function as a plugin. ↓

fix Use plugins: [require('webpack-env')] not plugins: [new require('webpack-env')]

gotcha .env.js must use CommonJS (module.exports) not ES module export. ↓

fix Use module.exports = { ... } instead of export default { ... }

deprecated Package is unmaintained; no updates for years; consider dotenv-webpack for active development. ↓

fix Migrate to dotenv-webpack: install dotenv-webpack and use new Dotenv() in plugins.

gotcha Only supports single .env.js file; multiple environments require separate files like .production_env.js but no documented override order. ↓

fix Manually set NODE_ENV before build to switch files.

Install

npm install webpack-env

yarn add webpack-env

pnpm add webpack-env

Imports

webpackEnv

wrong

import webpackEnv from 'webpack-env'

correct

const webpackEnv = require('webpack-env')

CJS only; no ESM exports.

.env.js

wrong

export default { MY_VAR: 'value' }

correct

module.exports = { MY_VAR: 'value' }

Must use CommonJS exports; ES module exports not supported.

Plugin usage in webpack config
wrong
```
plugins: [new WebpackEnv()]
```
correct
```
plugins: [new webpack.webpackEnv()] or plugins: [require('webpack-env')]
```
The plugin itself is the required function; no instantiation with new.

Quickstart

Sets up webpack-env plugin with gulp and a .env.js file defining globals.

// gulpfile.js
const gulp = require('gulp');
const webpack = require('webpack');
const webpackEnv = require('webpack-env');

gulp.task('webpack', function() {
  return gulp.src('./entry.js')
    .pipe(webpack({
      output: { filename: 'bundle.js' },
      plugins: [webpackEnv]
    }))
    .pipe(gulp.dest('build/'));
});

// .env.js (in project root)
module.exports = {
  MY_API_URL: 'https://api.example.com',
  DEBUG: true
};