Webpack 개발 서버

Webpack은 프로젝트 파일이 변경 될 때마다 자동으로 컴파일 하는 데 도움이 되는 몇 가지 옵션을 제공합니다.

1. Webpack 워치(Watch)

2. Webpack Dev Server

3. Webpack Dev Middleware

이 중 Webpack Dev Server는 개발용 웹 서버 그리고 라이브 리로딩(실시간 업데이트) 기능을 제공합니다. 프로젝트에 "웹팩 개발 서버"를 설치하고 활용하는 방법을 살펴봅니다.

패키지 설치

npm i webpack-dev-server -D

webpack.config.js

package.json

HMR (Hot Module Replacement)은 프로젝트 파일이 변경되어도 다시 로딩 하지 않고 앱이 실행되는 동안 모듈을 교환, 추가 또는 제거합니다. 다음과 같은 몇 가지 방법으로 개발 속도를 크게 높일 수 있습니다.

• 페이지를 다시 로드 해도 애플리케이션 상태를 유지합니다.

• 변경된 사항만 업데이트 하여 개발 시간을 단축할 수 있습니다.

• 파일을 수정하고 저장하면 브라우저를 즉시 업데이트 합니다.

Webpack v5에서 개발 서버의 핫 모듈 교체(HMR) 버그가 있어, 실시간 변경이 제대로 작동하지 않습니다. 이 문제를 해결하려면 Webpack 구성 파일에 다음과 같은 설정이 필요합니다.

module.exports = {
  // Webpack v5 버그(Live Reload 문제) 해결
  target: 'web',
  // ...
}

참고

Development | webpackwebpack

DevServer | webpackwebpack

Webpack v5 개발 서버 실시간 업데이트 문제 해결 방법