webpack plugin: proxy-switch-plugin
Tags: webpack
Published: 2022-06-05 16:23:07

## Foreword
When we developing some big project base on `webpack`, we may face the embrassing situation of slowly restarting the project to switch proxy so than we could test with different backend. To handle this problem, I wrote this plugin: [proxy-switch-plugin](https://github.com/Soundmark/proxy-switch-plugin/blob/master/README.en-US.md)

## Getting Started

```cmd
// npm
npm i proxy-switch-plugin -D

//yarn
yarn add proxy-switch-plugin -D
```

## Usage

### Config

In `webpack`：

```javascript
const ProxySwitchPlugin = require("proxy-switch-plugin");
module.exports = {
  // ...
  plugins: [
    new ProxySwitchPlugin({
      // write down all you proxy config
      proxyList: {
        peter: {
          "/api": {
            target: "http://localhost:3000",
            pathRewrite: {
              "/api": "/",
            },
          },
        },
        park: {
          "/api": {
            target: "http://localhost:3001",
            pathRewrite: {
              "/api": "/",
            },
          },
        },
      },
      // the default proxy config key
      defaultProxy: "park",
      // watch config change
      watchPath: path.join(__dirname, "webpack.config.js"),
    }),
  ],
  // ...
};
```

In `chainWebpack`：

```javascript
const ProxySwitchPlugin = require("proxy-switch-plugin");
module.exports = {
  // ...
  chainWebpack: (config) => {
    config.plugin("proxy-switch-plugin").use(ProxySwitchPlugin, [
      {
        // write down all you proxy config
        proxyList: {
          peter: {
            "/api": {
              target: "http://localhost:3000",
              pathRewrite: {
                "/api": "/",
              },
            },
          },
          park: {
            "/api": {
              target: "http://localhost:3001",
              pathRewrite: {
                "/api": "/",
              },
            },
          },
        },
        // the default proxy config key
        defaultProxy: "park",
        // watch config change
        watchPath: path.join(__dirname, "vue.config.js"),
      },
    ]);
  },
  // ...
};
```

> Note: You should not config `webpack.devServer.proxy` after you use this plugin. And you should config the proxy like the example do which is the classic format in `webpack`. If you use other format, the plugin dosen't promise to work.

### Proxy Switch

The plugin provide a default `select` component. For example, you could use it like this in `React`:

```jsx
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>;
}
```

Put the `select` component on the place properly. Switch the proxy by select different proxy key in the `select` component.

Of course, the default `select` component is written by `html select` component. The style may not satisfy you. But you could do this work youself. The plugin provide two interface to help switch proxy:

#### get proxy list

- url: /proxy/list
- method: GET
- res: {list: string[]}

#### switch proxy

- url: /proxy/change
- params: {proxy: string}
- method: GET

### Config Hot Update(Experimental)

By delivering the webpack config file path from the `watchPath` option, we could update our proxy config without restarting the server and just a fast refresh of the page.

> Notice：This is a experimental feature. Only little test have made on typical `webpack` config. `chainWebpack` config have never test yet. Please use it carefully.

## Last But Not Least
If the plugin helps you, don't forget to star.