소개

Webpack 개발 서버는 개발 환경에서 웹 애플리케이션을 테스트하거나 개발할 때 사용하는 도구입니다. 개발 서버를 사용하면 변경 사항을 실시간으로 반영하고, Hot Module Replacement를 통해 애플리케이션의 부분적인 업데이트를 가능하게 합니다.

설치

Webpack 개발 서버를 설치하려면 npm을 사용합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하세요:

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

설정

Webpack 개발 서버를 사용하기 위해 webpack.config.js 파일을 수정해야 합니다. 아래와 같이 설정을 추가해주세요:

module.exports = {
  // ...
  devServer: {
    contentBase: './dist', // 개발 서버의 기본 경로
    port: 8080, // 개발 서버 포트 번호
    hot: true, // Hot Module Replacement 활성화
  },
  // ...
};

사용법

Webpack 개발 서버를 실행하려면 package.json 파일의 scripts 영역에 다음과 같은 명령어를 추가하세요:

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

이제 터미널에서 npm run dev 명령어를 실행하면 개발 서버가 실행됩니다. 브라우저에서 http://localhost:8080를 열어서 애플리케이션을 확인할 수 있습니다. 변경 사항을 저장하면 자동으로 다시 빌드되고 브라우저에 반영됩니다.

결론

Webpack 개발 서버를 사용하면 개발 효율성을 향상시킬 수 있습니다. 변경 사항을 실시간으로 반영하고, Hot Module Replacement를 통해 애플리케이션을 부분적으로 업데이트할 수 있습니다. 개발 서버를 설정하고 사용하는 방법에 대해 알아보았습니다.

참고 자료

• Webpack 공식 문서 - DevServer
• Webpack Dev Server GitHub 페이지