[Webpack] webpack-dev-server에 대해 알아보자!

💡 webpack-dev-server의 역할

• 웹팩을 통해 번들링을 할 때마다 해당 결과를 확인하기 위해서는 매번 브라우저 새로고침 해야하는데, 이는 개발 생산성 측면에서 좋지 않을 뿐만 아니라 실제 배포되는 웹 서버 환경과 다를 수 있다는 문제점이 있다.
• 이러한 문제점을 해결하고자 webpack-dev-server가 등장한 것이다.

webpack-dev-server란?

• webpack을 이용한 개발 서버 도구이다.

• webpack의 빌드 대상 파일이 변경되면, 번들링을 실행한 후 브라우저를 자동 새로고침해준다.

• 그리고 실제 배포되는 서버와 비슷한 환경을 만들 수 있는 기능도 제공해준다.

webpack-dev-server 설치 & 커스텀 명령어 작성

npm install -D webpack-dev-server

// package.json

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

명령어 실행 후 결과 확인

npm run webpack:serve

• 명령어 실행 후에 localhost:8080을 확인해보면, 번들링된 결과를 확인해볼 수 있고, 어떤 파일이 수정되면 자동으로 새로고침까지 진행해주는 것을 볼 수 있다.

• 해당 명령어를 입력하면 번들링이 다시 실행되는데, 이때는 번들링된 파일을 출력해주지 않는다.

webpack-dev-serve 관련 설정 파일 옵션 작성

• 개발 서버에 대한 설정은 devServer 옵션을 이용해 진행한다.

module.export = {
  devServer: {
    host: '0.0.0.0', // 도메인
    port: 8000, // 포트 번호
    open: true,
  }
}

• devtools 옵션은 소스 맵 (번들링된 파일과 원본 파일을 매핑해 원활한 디버깅을 도와줌) 생성 방식을 지정할 수 있다.

module.exports = {
  devtools: 'eval-source-map' // 원본 소스를 그대로 나타내줌
}

다음에는 이어서 웹팩 설정 파일을 개발용과 실제 프로덕션용으로 나누는 작업에 대해서 알아보겠다!~