webpack-dev-server

 

새로고침 하는게 귀찮을때 자동으로 새로고침해주는 기능

npm i -D webpack-dev-server :

 

webpack-dev-server란?

webpack-dev-server는 빠른 실시간 리로드 기능을 갖춘 개발 서버로,

• 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라짐
• webpack.config.js에도 devServer 옵션을 통해 옵션을 지정하여 사용이 가능

webpack-dev-server의 동작원리

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

 

<webpack-dev-server 옵션>

package.json 에

"dev":"webpack-dev-serve --hot" 추가 

output: 에 public path: '/dist' \추가 

 

<watch 옵션>

커맨드를 실행시키지 않고도 프로젝트의 변경 내용을 감시해서 적용해주는 기능

"build":"webpack --watch"