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

:

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

The start script in

package.json

is typically:

<code>{
  "scripts": {
    "start": "npx webpack serve"
  }
}</code>

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

:

<code>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</code>

Modify

webpack.config.js

to import the selected configuration based on an extra npm argument:

<code>// 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;</code>

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.

<code>// 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;</code>

Update

webpack.config.js

to read the key from the command line and retrieve the matching settings:

<code>// 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;</code>

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:

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

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:

<code>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
</code>

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.