React与Webpack实现一次构建多环境部署，解决BASEURL后修改难题

Great question! This is a super common pain point when dealing with multi-environment deployments—nobody wants to rebuild their entire app just to tweak a backend URL. Let me share a few minimal-change solutions that let you adjust BASEURL (or any config) after a single build, no re-compilation required:

1. Static Config JSON File (Most Minimal Change) #

This is the simplest approach with almost zero impact on your existing code:

• Create a config.json file in your webpack project's public/static assets directory (the one that gets copied directly to the dist folder without bundling):

  {
    "BASEURL": "http://127.0.0.1:8090"
  }
  

• Replace your hardcoded BASEURL variable in the app with an async load of this JSON file. For example:

  // Remove the hardcoded let BASEURL = "..."
  let BASEURL;
  
  // Load config on app initialization
  async function initApp() {
    try {
      const configRes = await fetch('/config.json');
      const config = await configRes.json();
      BASEURL = config.BASEURL;
      // Initialize your app here (e.g., mount React/Vue root component)
    } catch (err) {
      // Fallback to default URL if config fails to load
      BASEURL = "http://127.0.0.1:8090";
      console.warn("Failed to load config, using default BASEURL", err);
    }
  }
  
  initApp();
  

• After running npm run build, you can directly edit the config.json file in the dist folder to update BASEURL for any environment—no rebuild needed.

2. Injected Global Config via HTML #

If you prefer keeping config in your index.html instead of a separate JSON file:

• Update your webpack DefinePlugin to reference a global window variable instead of hardcoding the value:

  // webpack.config.js
  const webpack = require('webpack');
  
  module.exports = {
    // ... other config
    plugins: [
      new webpack.DefinePlugin({
        // Point to a global variable instead of embedding the value
        'process.env.BASEURL': 'window.__APP_CONFIG__.BASEURL'
      })
    ]
  };
  

• Add a script tag to your public/index.html to define the global config:

  <script>
    window.__APP_CONFIG__ = {
      BASEURL: "http://127.0.0.1:8090"
    };
  </script>
  

• Post-build, just edit the script block in dist/index.html to change BASEURL for different environments.

3. Reverse Proxy (For Server-Level Control) #

If you're deploying behind a server like Nginx, you can avoid hardcoding BASEURL entirely by using relative paths:

• Set BASEURL to a relative path in your app:

  let BASEURL = "/api";
  

• Configure your Nginx (or other server) to proxy requests to /api to the correct backend URL for each environment:

  # Example Nginx config for production
  location /api {
    proxy_pass http://prod-backend.example.com:8090;
  }
  
  # For staging, just change proxy_pass to http://staging-backend.example.com:8090
  

This way, your single build works across all environments—you just adjust the server config instead of the app code.

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