使用webpack.DefinePlugin后process.env始终为空，配置node:{process:false}导致React应用无法渲染的问题排查

我来帮你一步步排查和解决这个问题，先从你的配置和遇到的两个核心问题说起：

一、为什么process.env始终为空？ #

你的webpack.DefinePlugin配置逻辑本身没问题，但可能有几个关键点没落实：

1. 确认dotenv确实加载到了.env文件的内容 #

你的代码里虽然打印了finalPath和envKeys，但要注意：

• 如果启动脚本没传递ENVIRONMENT参数，env.ENVIRONMENT会是undefined，导致envPath变成./.env.undefined，这个文件肯定不存在，所以会 fallback 到./.env。如果这个根目录的.env文件也不存在，dotenv.config()返回的parsed就会是undefined，envKeys自然是空对象。
• 解决方法：
  • 在package.json的启动脚本里明确传递环境参数，比如：

    "scripts": {
      "start": "webpack-dev-server --env.ENVIRONMENT=development",
      "build": "webpack --env.ENVIRONMENT=production"
    }
    

  • 给dotenv加载加个错误判断，避免空对象进入DefinePlugin：

    const dotenvResult = dotenv.config({ path: finalPath });
    if (dotenvResult.error) {
      throw dotenvResult.error;
    }
    const fileEnv = dotenvResult.parsed;
    

2. 不要直接访问整个process.env对象 #

webpack.DefinePlugin的工作原理是编译时文本替换，它只会替换代码中具体的process.env.XXX引用，而不会创建一个完整的process.env对象。如果你在代码里直接写console.log(process.env)，浏览器里这个对象要么是Webpack mock的空对象，要么根本不存在（取决于node配置）。

• 解决方法：
  在业务代码里只访问具体的环境变量键，比如：

  // 正确写法
  console.log(process.env.API_BASE_URL);
  // 如果需要多个变量，可以手动组装对象
  const appEnv = {
    apiUrl: process.env.API_BASE_URL,
    appName: process.env.APP_NAME
  };
  

二、为什么设置node:{process:false}后React代码无法执行？ #

在浏览器环境中原本就没有Node.js的process对象，Webpack默认会提供一个mock的空process对象（对应node.process: "mock"）。当你设置node:{process:false}时，Webpack会停止提供这个mock对象，代码里只要有访问process的地方（哪怕是process.env.XXX），就会抛出process is not defined的错误，导致React代码无法执行。

• 解决方法：
  删掉node配置（Webpack 4+默认是"mock"），或者显式设置成默认值：

  node: {
    process: "mock"
  }
  

  这样既不会影响环境变量的替换，也不会因为缺少process对象导致代码报错。

三、优化后的关键配置片段 #

调整后的webpack.config.js核心部分应该是这样的：

module.exports = (env) => {
  const currentPath = path.join(__dirname);
  const basePath = `${currentPath}/.env`;
  const envPath = `${basePath}.${env.ENVIRONMENT}`;
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  // 加载环境变量并校验
  const dotenvResult = dotenv.config({ path: finalPath });
  if (dotenvResult.error) {
    throw dotenvResult.error;
  }
  const fileEnv = dotenvResult.parsed;

  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    // 删掉或调整node配置
    node: {
      process: "mock"
    },
    // ... 其他配置（entry、output、module等）
    plugins: [
      new webpack.DefinePlugin(envKeys),
      // ... 其他插件（NoEmitOnErrorsPlugin、HotModuleReplacementPlugin等）
    ]
  };
};

最后验证步骤 #

1. 确保.env.development（或对应环境的.env文件）存在，内容格式正确：

   API_BASE_URL=http://localhost:3000/api
   APP_NAME=MyReactApp
   

2. 启动项目，在业务代码里打印具体的环境变量，比如console.log(process.env.API_BASE_URL)，应该能看到正确的值。
3. 不要再直接打印整个process.env对象，因为它在浏览器里本来就不是完整的。

内容的提问来源于stack exchange，提问作者Rahul Vijaykar