새로고침 하는게 귀찮을때 자동으로 새로고침해주는 기능
npm i -D webpack-dev-server :
webpack-dev-server란?
webpack-dev-server는 빠른 실시간 리로드 기능을 갖춘 개발 서버로,
- 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라짐
- webpack.config.js에도 devServer 옵션을 통해 옵션을 지정하여 사용이 가능
webpack-dev-server의 동작원리
- 서버 실행 시 소스 파일들을 번들링하여 메모리에 저장소스 파일을 감시
- 소스 파일이 변경되면 변경된 모듈만 새로 번들링
- 변경된 모듈 정보를 브라우저에 전송
- 브라우저는 변경을 인지하고 새로고침되어 변경사항이 반영된 페이지를 로드
<webpack-dev-server 옵션>
package.json 에
"dev":"webpack-dev-serve --hot" 추가
output: 에 public path: '/dist' \추가
<watch 옵션>
커맨드를 실행시키지 않고도 프로젝트의 변경 내용을 감시해서 적용해주는 기능
"build":"webpack --watch"
'vue.js' 카테고리의 다른 글
element-ui (0) | 2023.04.25 |
---|---|
CORS 에러 (vue.js, springboot) / proxy (0) | 2023.04.25 |
webpack, vue-loader, vue-style-loader (0) | 2023.04.24 |
ref (0) | 2023.04.21 |
vue.js 문서 (0) | 2023.04.21 |