Webpack 5如何引入环境变量？配置后process未定义报错怎么解决

报错根因 #

• webpack 5 默认移除了Node.js核心模块的浏览器polyfill，浏览器运行环境本身不存在process全局对象，所以运行时代码访问process会直接抛出未定义错误。
• 你的启动脚本读取.env的路径大概率配置错误：../.env会读取项目根目录的上一级目录的.env文件，如果你的.env和package.json同存放在项目根目录，会读取不到对应环境变量，导致webpack没有拿到需要注入的值。

正确实现构建时注入环境变量的方案 #

方案一：原生webpack配置实现 #

1. 先修正package.json启动脚本的.env读取路径：

"start": "export $(xargs < .env) && webpack serve --open --config webpack.dev.js"

注意：export语法仅适用于Mac/Linux环境，Windows环境需要调整为对应set语法，跨环境兼容更推荐第二种方案。

2. 修改webpack.dev.js的plugins配置，用DefinePlugin做静态字符串替换，webpack构建阶段会直接把代码里的process.env.CUSTOM_PATH替换为对应字符串值，避免运行时访问process对象：

plugins: [
  new webpack.DefinePlugin({
    'process.env.CUSTOM_PATH': JSON.stringify(process.env.CUSTOM_PATH)
  })
],

方案二：用dotenv-webpack插件实现（更推荐，自动跨环境兼容） #

1. 安装依赖包：

npm install dotenv-webpack --save-dev

2. 修改webpack.dev.js配置，插件会自动读取根目录下的.env文件注入环境变量：

const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');

module.exports = {
  // 原有其他配置保持不变
  plugins: [
    new Dotenv()
  ],
  devServer: {
    static: './public',
  },
};

3. 简化package.json启动脚本，无需手动export环境变量：

"start": "webpack serve --open --config webpack.dev.js"

注意事项 #

• 注入环境变量时不要把系统级环境变量全部打包到前端代码中，避免敏感信息泄露，只注入需要用到的业务相关变量即可。
• 可以在webpack配置文件中打印process.env.CUSTOM_PATH，启动时查看终端输出确认环境变量是否正确读取，排查路径配置问题。

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