webpack dev server

fe_sw·2022년 8월 26일
0

Webpack

목록 보기
4/4
post-thumbnail

webpack dev server는 웹 애플리케이션을 개발하는 과정에서 실시간으로 리로드가 되는 웹팩의 개발 서버이다.
매번 웹팩 명령어를 사용할 필요없이 코드의 변경사항을 감지해 브라우저에 반영해준다.

동작원리

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

설치

npm i -D webpack-dev-server

설정

여기서 key값인 dev는 다른것으로 교체해도 상관없다.

// package.json
"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
}
// webpack-config.js
// 포트,proxy서버 등등 설정가능

module.exports={
devServer:{
  port:9000,
  proxy: {
      '/api': 'http://localhost:3000'
  }
 }
}

devServer 속성

속성명descriptionCLI
host사용될 호스트 지정webpack-dev-server –host 127.0.0.1
contentBase콘텐츠를 제공할 경로지정 (정적파일을 제공하려는 경우에만 필요)webpack-dev-server –content-base /path/to/content/dir
compress모든 항목에 대해 gzip압축 사용webpack-dev-server –compress
hotwebpack의 HMR 기능 활성화
inlineinline 모드 활성화webpack-dev-server –inline=true
port접속 포트 설정webpack-dev-server –port 9000
opendev server 구동 후 브라우저 열기webpack-dev-server –open


참고

0개의 댓글