[프엔 개발자를 위한 Webpack] 3.Webpack Dev server

Webpack Dev Server

Webpack Dev Server

• webpack의 빌드 대상 파일이 변경되었을 때, 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드 + 새로고침
• 개발 과정에서 사용한다.

Webpack Dev Server 특징

1. 웹팩 데브 서버는 빌드한 결과물이 프로젝트 폴더, 파일 탐색기에서 찾을 수 없다.
   • 인메모리 기반
   • 컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 자원 소모가 적음

• 작업 디렉토리에서 빌드 된 파일을 확인할 수 없지만, network를 확인해보면 bundle.js로 HTTP 요청이 이루어짐을 확인할 수 있다.
• 따라서 인메모리 방식으로 이루어짐을 알 수 있음.

1. 개발이 완료되면 웹팩 명령어(’build’ : ‘webpack’과 같은 커스텀 명령어 가능)를 사용해서 빌드 결과물을 파일로 생성해야한다.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve",
    "build": "webpack"
  },

본 게시물은 Inflearn ‘캡틴판교’님의 강의를 듣고 작성되었습니다.