webpack-dev-server?

• 실시간 reload 기능을 가지고 있는 개발 서버이다.

• 디스크에 저장되지 않는 메모리 컴파일을 사용하여 컴파일 속도가 빠르다.

  → webpack.config.js 에서 devServer 옵션을 지정하여 사용이 가능하다.

동작 원리

1. 서버 실행시 소스 파일을 번들링
2. 메모리에서 저장 소스 파일을 감시
3. 소스 파일 변경시 변경 모듈만 번들링
4. 변경 모듈을 브라우저에 전송
5. 브라우저에서 변경 사항을 새로고침하여 반영 페이지를 로드

Dev Server

• 빌드 대상 파일이 변경 되었을 때

  → 웹팩 명령어를 매번 실행하지 X

  ⇒ 웹팩으로 빌드하고 브라우저 새로고침

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

웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우,