Webpack Dev Server

웹팩 데브 서버(Webpack Dev Server)는 개발 과정에서 사용하는 개발용 서버로,
빌드 대상 파일이 변경되면 매번 웹팩 명령어를 다시 실행하지 않아도
코드 변경 후 저장 시 자동으로 빌드하고 브라우저를 새로고침하여 변경 내용을 바로 확인할 수 있게 해준다.

웹팩 데브 서버 실행 명령어

package.json의 scripts에 아래와 같이 작성하여 실행할 수 있다.

{
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack"
  }
}

• npm run dev: 웹팩 데브 서버 실행
• npm run build: 일반 웹팩 빌드 실행

웹팩 데브 서버의 특징

웹팩 데브 서버는 일반 웹팩 빌드와 달리 개발 환경에 최적화된 기능을 제공한다.

1. 빌드 결과물을 메모리에 저장

• 일반 웹팩 빌드 → dist 같은 폴더에 파일 생성
• 웹팩 데브 서브 → 빌드 결과물을 메모리에 저장
• 따라서 실제 프로젝트 폴더에서는 빌드 파일을 확인할 수 없다.

2. 코드 변경 시 자동 빌드

• 소스 코드를 수정하고 저장하면 변경을 감지하여 자동으로 다시 빌드한다.
• 매번 웹팩 명령어를 실행할 필요가 없다.

3. 브라우저 자동 새로고침

• 빌드가 완료되면 브라우저가 자동으로 새로고침되어 변경된 결과를 바로 확인할 수 있다.

정리

웹팩 데브 서버는 개발 환경에서 사용하는 도구로 다음과 같은 특징이 있다.

• 코드 변경 시 자동 빌드
• 브라우저 자동 새로고침
• 빌드 결과물을 메모리에 저장
• 개발 속도 향상

따라서 개발 단계에서는 웹팩 데브 서버를 사용하고,
개발이 완료되면 webpack 명령어로 배포용 빌드 파일을 생성한다.