Webpack Dev Server는 개발 중인 웹 애플리케이션을 로컬 개발 환경에서 신속하게 테스트하고, 변경 사항을 실시간으로 반영할 수 있는 강력한 도구입니다. 이번 블로그 포스트에서는 Webpack의 웹팩 Dev Server를 설정하는 방법에 대해 알아보겠습니다.

1. 웹팩 Dev Server 설치하기

Webpack Dev Server를 사용하려면 먼저 해당 패키지를 설치해야 합니다.

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

2. 웹팩 Dev Server 설정 파일 생성하기

웹팩 Dev Server 설정을 위해 webpack.config.js 파일을 열고 다음과 같은 코드를 추가합니다:

const path = require('path');

module.exports = {
  // ... 웹팩 설정
  
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 9000,
    open: true
  }
};

위 설정은 다음과 같은 역할을 합니다:

• contentBase: Dev Server가 정적 파일을 제공할 경로를 지정합니다. 이 예시에서는 dist 디렉토리를 사용합니다.
• compress: 응답을 압축할지 여부를 설정합니다.
• port: Dev Server가 사용할 포트 번호를 지정합니다. 기본값은 8080 입니다.
• open: Dev Server 실행 시 브라우저를 자동으로 열지 여부를 설정합니다.

3. 웹팩 Dev Server 실행하기

설정이 완료되면 명령어를 통해 웹팩 Dev Server를 실행할 수 있습니다:

npx webpack-dev-server

위 명령어를 실행하면 Dev Server가 로컬 개발환경에서 애플리케이션을 실행하고, 변경 사항을 실시간으로 감지하여 새로고침합니다.

포트번호를 변경하려면, webpack.config.js 파일의 devServer.port 값을 수정하고 다시 실행하면 됩니다.

이제 여러분은 Webpack의 웹팩 Dev Server를 사용하여 개발하고, 변경 사항을 빠르게 확인할 수 있습니다.

더 자세한 설정 옵션에 대해서는 Webpack Dev Server 공식 문서를 참고하시기 바랍니다.