{"id":20755,"library":"webpack-env","title":"webpack-env","description":"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.","status":"maintenance","version":"0.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/toastynerd/webpack_env","tags":["javascript","weback","env"],"install":[{"cmd":"npm install webpack-env","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-env","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-env","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"CJS only; no ESM exports.","wrong":"import webpackEnv from 'webpack-env'","symbol":"webpackEnv","correct":"const webpackEnv = require('webpack-env')"},{"note":"Must use CommonJS exports; ES module exports not supported.","wrong":"export default { MY_VAR: 'value' }","symbol":".env.js","correct":"module.exports = { MY_VAR: 'value' }"},{"note":"The plugin itself is the required function; no instantiation with new.","wrong":"plugins: [new WebpackEnv()]","symbol":"Plugin usage in webpack config","correct":"plugins: [new webpack.webpackEnv()] or plugins: [require('webpack-env')]"}],"quickstart":{"code":"// gulpfile.js\nconst gulp = require('gulp');\nconst webpack = require('webpack');\nconst webpackEnv = require('webpack-env');\n\ngulp.task('webpack', function() {\n  return gulp.src('./entry.js')\n    .pipe(webpack({\n      output: { filename: 'bundle.js' },\n      plugins: [webpackEnv]\n    }))\n    .pipe(gulp.dest('build/'));\n});\n\n// .env.js (in project root)\nmodule.exports = {\n  MY_API_URL: 'https://api.example.com',\n  DEBUG: true\n};","lang":"javascript","description":"Sets up webpack-env plugin with gulp and a .env.js file defining globals."},"warnings":[{"fix":"Use plugins: [require('webpack-env')] not plugins: [new require('webpack-env')]","message":"Plugin is used directly without instantiation (new) – passing the required function as a plugin.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use module.exports = { ... } instead of export default { ... }","message":".env.js must use CommonJS (module.exports) not ES module export.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Migrate to dotenv-webpack: install dotenv-webpack and use new Dotenv() in plugins.","message":"Package is unmaintained; no updates for years; consider dotenv-webpack for active development.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Manually set NODE_ENV before build to switch files.","message":"Only supports single .env.js file; multiple environments require separate files like .production_env.js but no documented override order.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use plugins: [require('webpack-env')] instead of plugins: [new require('webpack-env')]","cause":"Using new webpackEnv() when plugin should be passed directly.","error":"TypeError: webpackEnv is not a constructor"},{"fix":"Not recommended for browser-only build; use dotenv-webpack or DefinePlugin.","cause":"webpack-env uses Node.js fs module; incompatible with webpack 4+/5 in browser environment.","error":"Module not found: Error: Can't resolve 'fs' in ..."},{"fix":"Create .env.js in project root with module.exports = { SOME_VAR: 'value' }","cause":".env.js not being loaded or exported incorrectly.","error":"ReferenceError: SOME_VAR is not defined"},{"fix":"Create .env.js file in the root directory containing module.exports = { ... }","cause":"No .env.js file found in project root.","error":"Warning: webpack-env plugin: .env.js file is missing"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}