개발 서버 (Dev Server)

webpack-dev-server는 코드가 변경될 때마다 전체 코드를 다시 빌드하고 브라우저를 새로고침(또는 Hot Module Replacement)하여 빠른 개발 환경을 구축할 수 있게 해주는 유틸리티입니다. 파일 시스템에 번들 결과물을 생성하지 않고 메모리 상에서 번들을 관리하므로 컴파일/빌드 속도가 빠릅니다.

설치

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

webpack.config.js 설정

const path = require('path');

module.exports = {
  // ... 생략 ...
  devServer: {
    static: './dist', // 개발 서버가 정적 파일을 제공할 경로
    hot: true,        // Hot Module Replacement (HMR) 활성화
    port: 3000,       // 서버 포트 지정
    open: true,       // 실행 시 자동으로 브라우저 오픈
    compress: true,   // gzip 압축 활성화
    historyApiFallback: true, // SPA에서 404 발생 시 index.html 렌더링
  },
};

스크립트 실행

package.json 스크립트를 변경하여 개발 서버를 손쉽게 실행할 수 있습니다.

{
  "scripts": {
    "start": "webpack serve --open",
    "build": "webpack"
  }
}

이제 터미널에서 npm run start 명령어를 실행시키면 소스 코드가 변경되는 시점에 맞춰 웹 브라우저가 자동으로 새로고침됩니다.