webpack 플러그인: 프록시-스위치-플러그인

머리말

webpack에서 큰 프로젝트 기반을 개발할 때 다른 백엔드로 테스트할 수 있도록 프록시를 전환하기 위해 프로젝트를 천천히 다시 시작해야 하는 당황스러운 상황에 직면할 수 있습니다. 이 문제를 처리하기 위해 다음 플러그인을 작성했습니다. proxy-switch-plugin

시작하기

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

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

용법

구성

webpack에서 :

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"),
    }),
  ],
  // ...
};

chainWebpack에서 :

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.

프록시 스위치

플러그인은 기본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 구성 요소를 제자리에 올바르게 놓습니다. select 구성 요소에서 다른 프록시 키를 선택하여 프록시를 전환합니다.

물론 기본select 구성 요소는 html select 구성 요소로 작성됩니다. 스타일이 만족스럽지 않을 수 있습니다. 하지만 이 작업을 직접 수행할 수 있습니다. 플러그인은 프록시를 전환하는 데 도움이 되는 두 가지 인터페이스를 제공합니다.

프록시 목록 가져오기

URL:/프록시/목록

방법: GET

입술: {목록: 문자열[]}

스위치 프록시

URL:/프록시/변경

매개변수: {프록시: 문자열}

방법: GET

구성 핫 업데이트(실험적)

watchPath 옵션에서 webpack 구성 파일 경로를 제공함으로써 서버를 다시 시작하지 않고 페이지를 빠르게 새로 고치지 않고 프록시 구성을 업데이트할 수 있습니다.

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.

마지막으로

플러그인이 도움이 된다면 별표 표시하는 것을 잊지 마세요.