dotenv-webpack在生产环境无法加载env变量，仿CRA配置webpack该如何修复？

问题根源90%出在env文件的相对路径匹配问题，dotenv-webpack的path默认相对执行构建命令的工作目录，生产构建时很容易因为执行上下文的差异找不到对应env文件，按以下步骤修改即可：

• 第一步：将env文件路径改为绝对路径，用path.resolve结合__dirname（当前webpack配置文件所在目录）定位，避免相对路径的上下文差异。同时检查webpack配置导出语法是否正确，你示例代码中写的modules.exports多了一个s，正确写法为module.exports。
• 第二步：可选添加systemvars: true配置，允许dotenv读取系统环境变量，避免和cross-env注入的NODE_ENV等变量冲突；排查问题时可开启debug: true，构建时会输出env文件加载日志，确认是否读取到正确的文件和变量。

修改后的webpack配置参考：

const path = require('path')
const Dotenv = require("dotenv-webpack")
const isProduction = process.env.NODE_ENV === "production"

module.exports = {
  // ...其他webpack配置
  plugins: [
    new Dotenv({
      // 请根据你的env文件和webpack配置文件的实际相对位置调整路径
      path: path.resolve(__dirname, `.env.${isProduction ? "production" : "development"}`),
      systemvars: true,
      // 排查问题时开启debug，可看到env加载的详细日志
      // debug: true
    }),
    // ...其他插件配置
  ]
  // ...其他webpack配置
}

额外注意事项 #

dotenv-webpack默认只会注入你代码中明确引用的环境变量（比如process.env.APP_KEY），不会把整个process.env对象注入到打包产物中，如果你是通过遍历process.env的方式取变量，需要手动配置expand: true或者改用DefinePlugin全量注入。

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