ReactJS 17项目中如何不使用.env文件将全局环境变量替换到src/index.html中？

问题原因分析 #

你的问题核心是HtmlWebpackPlugin没有正确将全局环境变量传递到index.html模板中，当前配置存在两个关键问题：

• HtmlWebpackPlugin里硬编码了REACT_APP_THIRD_PARTY_URL的值，直接覆盖了全局环境变量；
• 模板中使用的%变量%语法需要额外配置才能被解析，或者需要切换为HtmlWebpackPlugin默认支持的模板语法。

解决方案 #

步骤1：修正HtmlWebpackPlugin配置，传递全局环境变量 #

打开webpack.common.js，找到HtmlWebpackPlugin的配置项，把硬编码的变量值替换为从process.env中读取全局环境变量：

new HtmlWebpackPlugin({
  template: './src/index.html',
  // 移除硬编码的固定值，改为读取全局环境变量
  REACT_APP_THIRD_PARTY_URL: process.env.REACT_APP_THIRD_PARTY_URL
}),

步骤2：匹配模板语法（二选一即可） #

选项A：使用HtmlWebpackPlugin默认的EJS语法（推荐）

修改src/index.html中的变量占位符为EJS格式，这是HtmlWebpackPlugin默认支持的语法，无需额外配置：

<script src="<%= REACT_APP_THIRD_PARTY_URL %>"></script>

选项B：配置html-loader支持%变量%语法

如果你想保留%变量%的写法，需要修改html-loader的配置，开启插值解析功能：
在webpack.common.js的module.rules中找到html-loader的配置，添加interpolate选项：

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        interpolate: true // 开启后可解析%变量%格式的占位符
      }
    }
  ]
}

步骤3：移除不必要的dotenv配置（可选） #

由于你没有使用.env文件，而是依赖shell全局环境变量，webpack.development.js中的require('dotenv').config()可以移除——Node.js会自动从当前shell环境中加载process.env变量。

步骤4：验证配置并重启服务 #

保存所有修改后，重启开发服务：

npm run start

此时查看页面源码，应该能看到<script src="http://thirdpartyurl.com"></script>，占位符已被正确替换。

额外说明 #

• EnvironmentPlugin的配置是正确的，它负责将环境变量注入到JavaScript代码中（比如React组件中可通过process.env.REACT_APP_THIRD_PARTY_URL访问），但不会处理HTML模板的变量替换，这部分是HtmlWebpackPlugin的职责；
• 你已经通过echo $REACT_APP_THIRD_PARTY_URL验证了全局环境变量存在，这一步无需额外检查。

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