webpack
개발 서버 : webpack-dev-server

설치

webpack-dev-server 는 npm 통해 설치할 수 있습니다.

npm --save-dev webpack-dev-server

이제 서버를 시작할 수 있습니다.

./node_modules/.bin/webpack-dev-server

사용을 단순화하기 위해 package.json 에 스크립트를 추가 할 수 있습니다.

// package.json
{
  ...
  "scripts": {
    "start": "webpack-dev-server"
  },
  ...
}

사용할 수있는 서버를 실행하려면

npm run start

webpack-dev-server 는 webpack.config.js 섹션의 devServer 파일에 구성됩니다.

서버 콘텐츠 기본 디렉토리를 변경하려면 contentBase 옵션을 사용할 수 있습니다. 예제 구성 루트 디렉토리를 public_html 설정할 수 있습니다.

let path = require("path");

module.exports = {
  ...
  devServer: {
    contentBase: path.resolve(__dirname, "public_html")
  },
  ...
}

프록시 사용

webpack-dev-server 는 일부 요청을 다른 서버로 프록시 처리 할 수 ​​있습니다. 동일한 도메인에 요청을 보내려는 경우 API 클라이언트를 개발할 때 유용 할 수 있습니다.

프록시는 proxy 매개 변수를 통해 구성됩니다.

예를 들어 dev 서버가 /api 에 대한 요청을 8080 포트에서 수신 대기중인 다른 서비스로 전달하는 구성은 다음과 같습니다

// webpack.config.js
module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
...
}

고쳐 쓰기

pathRewrite 옵션을 사용하여 대상 경로를 다시 작성할 수 있습니다.

이전 예제에서 /api 접두사를 제거하려고한다고 가정하면 설정은 다음과 같이 보일 것입니다.

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
...

요청 /api/user/256 은 http://localhost:8080/user/256 으로 변환됩니다.

필터

일부 요청 만 프록시 할 수 있습니다. bypass 는 요청이 프록시되어야하는지 여부를 결정하는 리턴 값을 제공하는 기능을 제공합니다.

/api 대해서만 POST 요청을 프록시하고 나머지는 webpack 처리하도록 설정한다고 가정하면 설정은 다음과 같이 보일 것입니다

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        bypass: function(req, res, proxyOptions) {
          if(req.method != 'POST') return false;
        }
      }
    }
  }
...