前言

我们做业务的时候，难免会遇到要和不同后端联调的情况，尽管现在vite的普及在慢慢提升，不过目前来说项目开发构建上还是webpack的天下，对于较大型的项目或者是老项目，webpack仍然是主流，这就会让我们面临一个问题：重启切换代理的时间可谓相当漫长。针对这种问题写了这个webpack插件proxy-switch-plugin，这个插件基于webpack-dev-server，理论上所有基于webpack和webpack-dev-server的项目都能使用，通过插件可以快速切换代理而无需漫长的重启等待。

安装

yarn add proxy-switch-plugin -D or npm i proxy-switch-plugin -D

使用

配置

通过webpack配置使用：

const ProxySwitchPlugin = require("proxy-switch-plugin");
module.exports = {
  // ...
  plugins: [
    new ProxySwitchPlugin({
      // 将你所有的proxy配置写进来
      proxyList: {
        小明: {
          "/api": {
            target: "http://localhost:3000",
            pathRewrite: {
              "/api": "/",
            },
          },
        },
        小红: {
          "/api": {
            target: "http://localhost:3001",
            pathRewrite: {
              "/api": "/",
            },
          },
        },
      },
      // 默认的proxy配置的key
      defaultProxy: "小红",
      // 监控配置变化实现proxy热更新
      watchPath: path.join(__dirname, 'webpack.config.js'),
    }),
  ],
  // ...
};

通过chainWebpack配置使用：

const ProxySwitchPlugin = require("proxy-switch-plugin");
module.exports = {
  // ...
  chainWebpack: (config) => {
    config.plugin("proxy-switch-plugin").use(ProxySwitchPlugin, [
      {
        // 将你所有的proxy配置写进来
        proxyList: {
          小明: {
            "/api": {
              target: "http://localhost:3000",
              pathRewrite: {
                "/api": "/",
              },
            },
          },
          小红: {
            "/api": {
              target: "http://localhost:3001",
              pathRewrite: {
                "/api": "/",
              },
            },
          },
        },
        // 默认的proxy配置的key
        defaultProxy: "小红",
        // 监控配置变化实现proxy热更新
        watchPath: path.join(__dirname, 'vue.config.js'),
      },
    ]);
  },
  // ...
};

注意：使用了这个插件之后，你不应该再去配置webpack.devServer.proxy。你应该按照上述实例的方式来写 proxy 配置，这是 proxy 的经典配置写法，其他写法不确保成功。

切换代理

插件提供了默认的 select 组件，以React为例，你可以这样使用：

import ProxySelect from "proxy-switch-plugin/src/ProxySelect";
import "proxy-switch-plugin/src/ProxySelect.css";

function Index() {
  useEffect(() => {
    document.querySelector(".container").appendChild(ProxySelect);
  }, []);

  return <div className="container"></div>;
}

将 select 组件放到你认为合适的地方，通过选择不同代理的 key 名就可以切换代理。

配置热更新(实验性功能)

通过watchPath传入 webpack 配置文件的路径可实现配置热更新，即增删改 proxy 配置时也无需重启项目，仅通过刷新页面即可实现配置更新。

注意：这是一个实验性功能，未经过充分测试，请谨慎使用。

结语

觉得好用的同学求点赞，求star😊