Webpack 动态设置 devServer 的 proxy 配置项

在本地进行项目开发时候，有些时候需要使用代理来访问某些测试环境的数据，这就要在 Webpack 对 devServer 的 proxy 做相关的配置。比如，我们经常会配置 target 和 cookies 来转发请求，那么 Webpack 的配置如下：

// 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;{
  "scripts": {
    "start": "npx webpack serve"
  }
}

在 package.json 中会配置 script 用来启动项目，比如：

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

运行 npm run start 即可启动项目。这样的配置在一些简单的项目中是没有问题的，但是在一些复杂的场景中就会显得不够灵活：

• 如果我们有多套测试环境，每套环境的 target 和 cookie 并不一样，那么就会频繁的修改配置，这意味着 Webpack 配置文件的代码，很容易出现代码冲突。
• 如果我们配置的 cookie 出现错误或者过期的时候，那么就不得不修改配置并重新启动项目，对于那些构建比较耗时的项目，需要等待较长的时间才能启动起来。

对于第一种场景，需要对各套环境的配置做统一的管理，比较简单的做法是新建一个配置文件 proxy.config.js 用于存放配置项：

// proxy.config.js
const config = {
  example: {
    target: 'http://example.com',
    cookie: 'session=xxxx',
  },
  abc: {
    target: 'http://abc.com',
    cookie: 'session=yyyyy',
  }
}

module.exports = config['example']; // 将要使用的配置暴露出去

修改调整 webpack.config.js 文件：

// 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'
+          cookie,
+          referer: target
         }
       }
     }
   }
 }
 module.exports = config;

并且要在 git commit 的时候忽略掉 proxy.config.js，在 .gitignore 配置一下即可，这里不做展开。这样我们无论在本地如何改动该配置文件都不会和其他人的代码出现冲突。

有些时候我们可能并不需要更改 cookie 和 target，只是想在启动项目时切换另外一个配置，那么需要在 proxy.config.js 修改 module.export 出来的配置：

// proxy.config.js
const config = {
  example: {
    target: 'http://example.com',
    cookie: 'session=xxxx',
  },
  abc: {
    target: 'http://abc.com',
    cookie: 'session=yyyyy',
  }
}

- module.export = config['example'];
+ module.export = config['abc'];

很显然这样做不是很优雅，我们很容易忘了去改这里的代码，更优雅的方式是通过启动命令来控制使用哪条配置。比如我们通过下面的命令来启动项目，abc 就是我们想要用的配置项：

npm run start abc

为了实现这种效果，首先对 proxy.config.js 进行改造，将所有的配置都 export 出去：

// proxy.config.js
const config = {
  example: {
    target: 'http://example.com',
    cookie: 'session=xxxx',
  },
  abc: {
    target: 'http://abc.com',
    cookie: 'session=yyyyy',
  }
}

module.exports = config;

然后，再改造 webpack.config.js，我们要在 webpack.config.js 能拿到 npm run start abc 中的 abc, 并且解析出对应的配置：

// webpack.config.js

- const {target, cookie} = require('./proxy.config');
+ const proxyConfig = require('./proxy.config');
+ const proxyKey = process.avgs[3]; // 获取 npm run start abc 中的 'abc'
+ const {target, cookie} = proxyConfig[proxyKey];

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

 module.exports = config;

这样即可实现使用 npm run start abc 来启动项目。这里有个知识点，就是 npm run start abc 相当于 npx webpack serve abc，额外的参数会放在对应的 npm scripts 的尾部。

经过上面的实现，我们只需在 proxy.config.js 调整 target 和 cookie 即可，可以解决上传代码存在冲突的问题。接下来我们来解决动态加载的问题。

在上面的 Webpack 配置中，对 proxy 的配置是静态的，也就是一旦项目启动起来后，再去修改对应的 target 或 cookie 是不会生效，只能在重启之后才会生效。在这里我们需要实现动态加载，来达到改动配置后立即生效的效果。

这里的关键点是：

• 要让 devServer 的 proxy 能动态的设置 target 和 cookie
• 要让 devServer 能感知到 proxy.config.js 中文件的变化

在 Webpack 中 devServer 的 proxy 使用的是 http-proxy-middleware，它有一个配置项是 router，使用 router 可以动态设置代理的目标路由，并且 router 可以覆盖 target：

proxy: {
    '/api': {
      target,
+     router: () => target
      changeOrigin: true,
      header: {
        cookie,
        referer: target
      }
    }
  }

而对于 cookie 和 referer 它们都是在请求头里面的，http-proxy-middleware 提供了 onProxyReq 事件，如果命中了 target 在代理请求在发出之前会触发该事件。在 onProxyReq 事件中，我们可以修改代理请求头：

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

然后，为了监听文件变化，我们需要安装 chokidar，使用 chokidar 来监听变化 proxy.config.js：

// webpack.config.js

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

+ chokidar.watch('./proxy.config.js').on('all', (event, path) => {
+   const proxyConfig = require('./proxy.config');
+   const proxyData = proxyConfig[proxyKey];
+ 
+   target = proxyData.target;
+   cookie = proxyData.cookie;
+ });

当对 proxy.config.js 文件做更改之后，就会对 target 和 cookie 这两个变量重新去取值，这样就实现了监听 proxy.config.js 并将最新的值去出来。整体的代码如下：

// webpack.config.js

const chokidar = require('chokidar');
const proxyConfig = require('./proxy.config');

// npm run start proxyKey
const proxyKey = process.avgs[3];
let {target, cookie} = proxyConfig[proxyKey];

// 监听文件变化
chokidar.watch('./proxy.config.js').on('all', (event, path) => {
  const proxyConfig = require('./proxy.config');
  const proxyData = proxyConfig[proxyKey];

  target = proxyData.target;
  cookie = proxyData.cookie;
});

const config = {
  devServer: {
    port: 8000,
    proxy: {
      '/api': {
        target,
        router: () => target,
        changeOrigin: true,
        onProxyReq: (proxyReq, req) => {
          proxyReq.setHeader('cookie', cookie)
          proxyReq.setHeader('referer', target)
        }
      }
    }
  }
}

module.exports = config;

这就本文的全部，主要介绍了如何实现动态配置 Webpack devServer 的 proxy，以实现更灵活的效果。