webpack dev server

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 속성

속성명	description	CLI
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
hot	webpack의 HMR 기능 활성화
inline	inline 모드 활성화	webpack-dev-server –inline=true
port	접속 포트 설정	webpack-dev-server –port 9000
open	dev server 구동 후 브라우저 열기	webpack-dev-server –open

참고

• https://webpack.js.org/configuration/dev-server/