22. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 1

개발 서버 설정과 활용

웹팩에서 제공하는 개발 서버는 손쉽게 프로젝트를 개발할 수 있도록 도와주는 강력한 도구입니다. 이 글에서는 웹팩 개발 서버의 설정과 활용 방법에 대해 알아보겠습니다.

1. 개발 서버란?

웹팩 개발 서버는 소스 코드를 실시간으로 감시하고, 변경이 감지되면 빠르게 빌드하여 브라우저에 반영해주는 도구입니다. 이는 코드 수정 시 매번 수동으로 빌드하지 않아도 되어 효율적인 개발을 가능하게 합니다.

2. 설치

웹팩 개발 서버는 npm을 통해 간단히 설치할 수 있습니다.

npm install --save-dev webpack-dev-server

3. 기본 설정

웹팩 설정 파일(webpack.config.js)에서 개발 서버를 설정할 수 있습니다.

// webpack.config.js
const path = require('path');

module.exports = {
  // ... 다른 설정 ...

  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 서버에서 제공하는 파일의 기본 경로
    port: 8080, // 개발 서버의 포트
    open: true, // 서버 실행 시 브라우저 자동 오픈
  },
};

4. 개발 서버 실행

웹팩 개발 서버는 명령어로 간단히 실행할 수 있습니다.

npx webpack serve --config webpack.config.js

 

또는 package.json의 스크립트에 등록하여 사용할 수도 있습니다.

// package.json
{
  // ... 다른 설정 ...
  "scripts": {
    "start": "webpack serve --config webpack.config.js"
  }
}

 

이제 npm start 명령어로 개발 서버를 실행할 수 있습니다.

5. 추가 기능

5.1 핫 모듈 리플레이스먼트 (Hot Module Replacement, HMR)

HMR은 코드 수정 시 전체 페이지를 새로고침하지 않고도 모듈의 변경 사항을 즉시 반영하는 기능입니다.

// webpack.config.js
module.exports = {
  // ... 다른 설정 ...

  devServer: {
    hot: true, // HMR 활성화
  },
};

5.2 프록시 설정

API 서버와 개발 서버를 다른 포트로 실행할 때 프록시 설정을 통해 CORS 에러를 방지할 수 있습니다.

// webpack.config.js
module.exports = {
  // ... 다른 설정 ...

  devServer: {
    proxy: {
      '/api': 'http://localhost:3000', // /api로 시작하는 요청은 http://localhost:3000으로 프록시
    },
  },
};

 

웹팩 개발 서버를 통해 프로젝트를 개발하면서 실시간으로 변경 사항을 확인하고, 추가 기능을 활용하여 보다 효율적으로 개발할 수 있습니다.