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을 공부하며 개인적으로 정리한 내용입니다.
본문에 관련된 문제 사항이 있는 경우, 댓글로 남겨주시면 감사하겠습니다! 🙌