프론트엔드 개발 환경 공부 #16 webpack-dev-server

webpack-dev-server 란?

webpack-dev-server는 웹팩을 이용한 애플리케이션을 개발하는 것을 도와주는 도구이다. 웹팩의 설정 파일에도 이를 설정하기 위한 devServer라는 설정이 있다.

개발 환경에서 단순히 html을 열어서 해당 코드가 잘 돌아가나 확인하는 것이 아니라 서버와 비슷한 환경을 구성하여 배포시에 발생할 수 있는 잠재적인 문제를 미리 확인하고, API 연동을 통해 CORS 문제도 해결해줄 수 있다.

webpack-dev-server 공식 문서
webpack-dev-server 깃허브

설치 방법

npm install -D webpack-dev-server

다른 패키지들과 설치 방법이 같다.

package.json 에 명령어 추가하기

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --progress"
  },

• npm run start를 입력하면 webpack-dev-server를 실행하도록 세팅해두었다.
• --progress 옵션은 프로젝트의 크기가 커졌을 때 어디까지 빌드가 되었는지 알아보기 위해서 유용하다.

실행해보기

내 아이피의 8080포트로 서버를 하나 띄워준다.

hot reload 경험해보기

실행 중 js 혹은 css 파일 등의 내용을 바꾸면 콘솔에 메시지가 출력되며 즉시 적용해준다.

webpack-dev-server의 기본 설정

// webpack.config.js
module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    }
    publicPath: "/",
    host: "dev.domain.com",
    client: {
      overlay: true
    },
    port: 8080,
    stats: "errors-only",
    historyApiFallback: true
  }
}

• static.directory: 정적 파일을 제공할 경로이다. 기본 값은 웹팩의 아웃풋이다.
• publicPath: 브라우저를 통해 접근하는 경로이다. 기본 값은 /이다.
• host: 개발 환경에서 도메인을 맞춰야 하는 상황에서 사용한다. 이를테면 쿠키 기반의 인증은 서버와 동일한 도메인으로 개발 환경을 맞추어야 한다. 운영체제의 호스트 파일에 해당 도메인과 127.0.0.1 추가한 뒤에 host 속성에 도메인을 설정해서 사용한다.
• client.overlay: 빌드 시 에러나 경고를 브라우저 화면에 표시한다.
• port: 개발 서버 포트 번호를 설정한다. 기본 값은 8080
• client.logging: 메시지 수준을 정할 수 있다. 'none', 'errors-only', 'minimal', 'normal', 'verbose'로 메시지 수준을 조절한다.
• historyApiFallBack: 히스토리 API를 사용하는 SPA 개발 시 설정한다. 404가 발생하면 index.html로 리다이렉트 한다.