웹팩 데브 서버 & 핫 리로딩

https://youtu.be/RCb0UF7Lu90

(제로초님 강의를 듣고 정리한 내용)

웹팩 데브서버 & 핫 리로딩

복습

코드를 수정할 때마다 npm run build를 해야 하는 단점을 해결해줌.
이름 그대로 데브서버. 개발용 서버

핫 리로딩: 앱을 처음부터 다시 시작하지 않고 새로운 코드 변경에 따른 코드 변경 사항만 표시하며 변경된 코드에만 적용. 변경점을 감지함.
리로딩과의 차이점: 리로딩은 새로고침을 함. 그러면 기존 데이터가 사라짐
핫리로딩은 기존 데이터를 유지하면서 변경사항을 바꿔줌.

웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해줍니다. 매번 명령어를 치는 시간과 브라우저를 새로 고침하는 시간 뿐만 아니라 웹팩 빌드 시간 또한 줄여주기 때문에 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용됩니다.

+) 웹팩 데브 서버를 실행하여 웹팩 빌드를 하는 경우에는 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않습니다. 좀 더 구체적으로 얘기하자면 웹팩 데브 서버로 빌드한 결과물은 (publicPath에 입력한)dist 폴더에 메모리로 저장하고 파일로 생성하지는 않기 때문에 컴퓨터 내부적으로는 접근할 수 있지만 사람이 직접 눈으로 보고 파일을 조작할 순 없습니다.
(컴퓨터 구조 관점에서 파일 입출력보다 메모리 입출력이 더 빠르고 컴퓨터 자원이 덜 소모됩니다)

출처:https://joshua1988.github.io/webpack-guide/devtools/webpack-dev-server.html

 

webpack-dev-sever와 @pmmmh/react-refresh-webpack-plugin이 버전 업데이트 되면서 변경사항이 생겼다고 함
webpack.config.js의 devServer에서,

devServer: {
  // before
  publicServer: '/dist', 
  
  // after
  devMiddleware: { publicPath: '/dist' },
  static: { directory: path.resolve(__dirname, 'src') },
}

static은 실제로 존재하는 정적 파일(index.html 같은)의 경로