[Webpack 알아보기] #9 - Webpack-dev-server란?

surim014·2021년 6월 28일
0

Webpack

목록 보기
9/10
post-thumbnail

Webpack-dev-server란? 🧐

정의 📋

실시간으로 리로드가 되는 웹팩의 개발 서버

특징 👋

  • 파일의 변화를 감지했을 때 다시 빌드를 실행하는 watch라는 옵션이 적용되어 있음
  • 라이브 리로딩 환경 제공
    → 수정사항 반영될 때마다 빌드 + 리프레시 자동 적용

동작 💪

  • dev-server는 dist 폴더와 관계없이 동작
    → 빌드 결과물이 파일로 쓰이지 않음
  • webpack-dev-server에서 빌드된 결과물은 메모리상에 있음
    → 직접 파일을 쓰고 지우는 방식보드 더 빠름
  • 수정된 결과물도 메모리 상에 있는 결과값이랑 비교를 해서 바로 수정이 됨
    → 수정된 피드백을 더욱 빨리 받음
  • 파일 프로토콜이 아닌 환경으로 컨텐츠가 제공

장점 👍

  • 서버가 띄워져 있는 상태로 접근이 쉬워짐
  • Cross Origin 같은 설정 내용도 API 서버를 만들게 되면 확인 가능
  • HTTP URL로 접근하기 때문에 실제로 웹 서비스에서 어떤식으로 이용이 될지에 대해 여러가지 생각을 할 수 있는 환경 제공

속성 ⚙️

open

  • 명령어가 실행됐을 때 자동으로 기본 브라우저로 설정되어 있는 브라우저를 기반으로 새 탭이 열리면서 웹 어플리케이션이 실행

overlay

  • 에러 메시지가 발생했을 때 브라우저 화면에 띄움

port

  • 자동으로 설정되어 있는 포트값을 임의의 포트값으로 수정할 수 있게 함

historyApiFallback

  • 라우팅과 관련된 속성
  • 특정 라우팅으로 지정했을 때, 제공하지 않은 라우팅으로 이동하면 예외적인 처리 (기본적으로는 index.html로 이동)
  • 특정한 라우팅은 특정한 html문서를 지정 이동 시킴
  • SPA 같이 html5 history api 사용을 하는 경우 설정하게 됨

출처 📝

  • Vue.js 압축 완성 올인원 패키지 Online - 패스트캠퍼스

위의 내용은 Webpack을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌

profile
Junior FrontEnd Developer 😎

0개의 댓글