[Webpack] Dev Server

Webpack Dev Server

웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구로 Webpack의 빌드 대상이 변경되었을 때 매번 Webpack명령어를 실행하지 않아도 코드만 변경하고 저장하면 Webpack으로 빌드한 후 브라우저를 새로고침 해준다.

매번 명령어를 치는 시간과 브라우저를 새로고침하는 시간, Webpack 빌드 시간을 줄여주기 때문에 Webpack 기반의 웹 애플리케이션 개발에 필수로 사용된다.

특징

Webpack Dev Server는 일반 Webpack 빌드와 다른점이 있다.

"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
}

Webpack Dev Server를 실행하여 Webpack 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에 보이지 않는다. 자세히 말하자면 Webpack Dev Server로 빌드한 결과물은 메모리에 저장되고 파일로 생성하지 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없다.

따라서 Webpack Dev Server는 개발할 때만 사용하고 완료시엔 Webpack 명령어를 이용해 결과물을 파일로 생성해야 한다.

 

※ 컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 자원이 덜 소모된다.