Webpack 3传入--env日志正常但运行时提示undefined问题排查

Let's break down what's happening here and how to fix it. First, your package.json script looks correct—passing --env.zone=configA should work as expected for Webpack's environment variable system. The confusing part is that console.log(env.zone) works but assigning let t = env.zone throws an error, which usually points to a scope issue.

Common Causes & Solutions #

1. You're accessing env outside the exported configuration function

This is the most likely culprit. Webpack only passes the env object to the function you export from webpack.config.js—it doesn't exist in the outer scope of the file. For example, this code will fail:

// ❌ Wrong: env is undefined here
let t = env.zone;

module.exports = (env) => {
  console.log(env.zone); // This works because env is defined inside the function
  return { /* Webpack config */ };
};

Fix: Move all code that uses env inside the exported function:

// ✅ Correct
module.exports = (env) => {
  // First, guard against undefined env (in case no args are passed)
  if (!env) {
    throw new Error("No environment variables provided to Webpack");
  }
  
  let t = env.zone; // This will work now
  console.log(t); // Outputs "configA"

  return {
    mode: env.mode || "development",
    // Add your other Webpack config options here
  };
};

2. You're using an async configuration function

Webpack expects the exported function to return a configuration object synchronously. If you use an async function, it will return a Promise instead of the config, and Webpack might not pass the env parameter correctly (or at all):

// ❌ Wrong
module.exports = async (env) => {
  // Async logic here
  let t = env.zone; // Might throw undefined error
  return { /* config */ };
};

Fix: Keep your configuration function synchronous. If you need async logic, handle async operations before returning the config (avoid marking the function itself as async).

3. Issues with command line parameter formatting (or Webpack version)

While --env.zone=configA is valid for Webpack 4+, if you're on an older version, try using space-separated syntax instead:

# Alternative syntax that works across Webpack versions
webpack --env zone=configA --env mode=development --config webpack.config.js

This will still populate env.zone and env.mode correctly in your config function.

4. Using yargs incorrectly

If you're switching to yargs to parse command line arguments, you don't need the --env prefix anymore. Adjust your script and config like this:

1. Update your package.json script:

   "webpack-main": "webpack --zone=configA --mode=development --config webpack.config.js"
   

2. Modify your webpack.config.js to use yargs:

   const yargs = require('yargs').argv;
   
   module.exports = () => {
     const zone = yargs.zone;
     const mode = yargs.mode;
   
     return {
       mode: mode,
       // Your config options
     };
   };
   

Final Check #

Double-check that all references to env are strictly within the exported configuration function. That's the most common fix for this specific error.

内容的提问来源于stack exchange，提问作者Thierry Blais