How to Dynamically Configure Webpack devServer Proxy for Multiple Environments

When developing locally you often need a proxy to access test‑environment data, which requires configuring the devServer proxy in Webpack. A simple setup defines target and cookie values directly in webpack.config.js:

const config = {
  devServer: {
    port: 8000,
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        header: {
          cookie: 'session=xxxx',
          referer: 'http://example.com'
        }
      }
    }
  }
};
module.exports = config;

The start script in package.json is typically:

{
  "scripts": {
    "start": "npx webpack serve"
  }
}

For projects with several test environments, repeatedly editing the proxy configuration leads to conflicts and restart overhead. Create a separate proxy.config.js file to store each environment’s target and cookie:

const config = {
  example: {
    target: 'http://example.com',
    cookie: 'session=xxxx',
  },
  abc: {
    target: 'http://abc.com',
    cookie: 'session=yyyyy',
  }
};
module.exports = config['example']; // expose the chosen config

Modify webpack.config.js to import the selected configuration based on an extra npm argument:

// webpack.config.js
+ const {target, cookie} = require('./proxy.config');
 const config = {
   devServer: {
     port: 8000,
     proxy: {
       '/api': {
-        target: 'http://example.com',
+        target,
         changeOrigin: true,
-        header: {
-          cookie: 'session=xxxx',
-          referer: 'http://example.com'
-        }
+        header: {
+          cookie,
+          referer: target
+        }
       }
     }
   }
 };
 module.exports = config;

To avoid committing the environment‑specific file, add proxy.config.js to .gitignore. You can also switch configurations without editing code by running npm run start abc, where abc is the desired key.

// proxy.config.js (export all configs)
const config = {
  example: { target: 'http://example.com', cookie: 'session=xxxx' },
  abc: { target: 'http://abc.com', cookie: 'session=yyyyy' }
};
module.exports = config;

Update webpack.config.js to read the key from the command line and retrieve the matching settings:

// webpack.config.js
+ const proxyConfig = require('./proxy.config');
+ const proxyKey = process.argv[3]; // e.g., "abc"
+ const {target, cookie} = proxyConfig[proxyKey];

 const config = {
   devServer: {
     port: 8000,
     proxy: {
       '/api': { target, changeOrigin: true, header: { cookie, referer: target } }
     }
   }
 };
 module.exports = config;

For truly dynamic updates without restarting the server, use http-proxy-middleware ’s router option and the onProxyReq hook to set request headers at runtime:

// webpack.config.js (dynamic proxy)
proxy: {
  '/api': {
    target,
    router: () => target,
    changeOrigin: true,
    onProxyReq: (proxyReq, req) => {
      proxyReq.setHeader('cookie', cookie);
      proxyReq.setHeader('referer', target);
    }
  }
}

To watch for changes in proxy.config.js and apply them instantly, install chokidar and set up a file watcher that reloads the configuration and updates the target and cookie variables:

const chokidar = require('chokidar');
const proxyConfig = require('./proxy.config');
const proxyKey = process.argv[3];
let {target, cookie} = proxyConfig[proxyKey];

chokidar.watch('./proxy.config.js').on('all', () => {
  const updatedConfig = require('./proxy.config');
  const data = updatedConfig[proxyKey];
  target = data.target;
  cookie = data.cookie;
});

// rest of webpack config using the mutable target and cookie

With these steps you can run npm run start abc to launch the project using the abc proxy configuration, and any modifications to proxy.config.js are picked up automatically, providing a flexible and conflict‑free development workflow.