웹 애플리케이션 개발 과정에서 코드 수정 사항을 확인할 때마다 매번 빌드 명령어를 실행하고 브라우저를 새로고침하는 작업은 개발 생산성을 저해하는 요소입니다. Webpack은 이러한 번거로움을 해결하기 위해 파일의 변경 사항을 감지하고 자동으로 결과물을 업데이트하는 여러 가지 방식을 제공합니다.

Webpack 자동 빌드 방식

Webpack에서 코드 변경을 감지하여 자동 빌드를 수행하는 방법은 크게 세 가지가 있습니다.

• Watch Mode: 파일 수정 시 자동으로 빌드를 다시 실행합니다.
• Webpack Dev Server: 로컬 서버를 구동하여 자동 빌드와 브라우저 리로딩 기능을 동시에 제공합니다.
• Webpack Dev Middleware: Webpack을 미들웨어로 사용하여 기존 서버 프레임워크에 빌드 기능을 통합합니다.

Webpack Watch 모드 사용하기

Watch 모드를 활성화하면 Webpack이 의존성 그래프에 포함된 파일들을 감시하며, 변경이 발생할 때마다 자동으로 재빌드를 수행합니다. 설정 방법은 다음과 같습니다.

1. 설정 파일에 추가

module.exports = {
  // ... 생략
  watch: true
};

2. CLI 명령어 사용

npx webpack --watch

단, Watch 모드는 빌드 결과물을 실제 파일로 생성하며 브라우저를 자동으로 새로고침해주지는 않는다는 한계가 있습니다.

Webpack Dev Server 구축

가장 널리 사용되는 방식인 webpack-dev-server는 빠른 개발 속도를 위해 결과물을 디스크에 쓰는 대신 메모리(Memory-FS)에 보관합니다.

설치 및 실행 설정

# 패키지 설치
npm install webpack-dev-server --save-dev

package.json 스크립트 구성:

{
  "scripts": {
    "start:dev": "webpack serve --mode development"
  }
}

webpack.config.js 서버 설정:

const path = require('path');

module.exports = {
  // ... 생략
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // 서버가 콘텐츠를 제공할 경로
    },
    compress: true,
    port: 3000,
  },
};

HMR (Hot Module Replacement) 이해하기

HMR은 브라우저를 전체 페이지 리로딩 없이 변경된 모듈만 실시간으로 교체하는 기술입니다. 이를 통해 애플리케이션의 현재 상태(입력 데이터, 모달 열림 상태 등)를 유지하면서 변경 사항을 즉각 확인할 수 있습니다.

HMR 활성화 설정

module.exports = {
  devServer: {
    hot: true, // HMR 기능 활성화
  },
};

대부분의 최신 프레임워크는 HMR을 지원하는 공식 로더나 플러그인을 제공합니다. Vue의 vue-loader나 React의 react-refresh가 대표적인 예시입니다.

HMR의 동작 원리

Webpack Dev Server는 내부적으로 두 종류의 서버를 운용합니다.

1. 정적 자원 서버(HTTP Server): 브라우저가 번들링된 파일을 요청하고 로드할 수 있도록 서빙합니다.
2. 소켓 서버(WebSocket): 브라우저와 서버 간의 실시간 통신 통로를 구축합니다.

파일 수정 시 발생하는 프로세스는 다음과 같습니다.

• 파일이 변경되면 Webpack이 이를 감지하여 변경된 모듈에 대한 manifest(JSON) 파일과 update chunk(JS) 파일을 생성합니다.
• 소켓 서버를 통해 브라우저에 변경 알림을 보냅니다.
• 브라우저 내부의 HMR 런타임이 해당 변경 파일을 받아 기존 모듈과 교체 작업을 수행합니다.