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

const path = require('path')

module.exports = {
  // 개발 서버 설정
  devServer: {
    // dist 디렉토리를 웹 서버의 기본 호스트 위치로 설정
    contentBase: path.resolve(__dirname, './dist'),
    // 인덱스 파일 설정
    index: 'index.html',
    // 포트 번호 설정
    port: 9000,
    // 핫 모듈 교체(HMR) 활성화 설정
    hot: true,
    // gzip 압축 활성화
    compress: true,
    // dist 디렉토리에 실제 파일 생성
    writeToDisk: true,
  }
}

package.json

Webpack 개발 서버 기본 설정

"scripts": {
  "dev": "webpack serve"
}

기본 브라우저에서 Webpack 개발 서버 열기

"scripts": {
  "dev": "webpack serve --open"
}

개발 모드에서 Webpack 개발 서버 구동

"scripts": {
  "dev": "NODE_ENV=development webpack serve"
}

커스텀 Webpack 구성 파일을 사용해 개발 서버 구동

"scripts": {
  "dev": "NODE_ENV=development webpack serve --config config/webpack.dev.js"
}

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

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

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

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

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

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

참고

Development | webpackwebpack

DevServer | webpackwebpack

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