[webpack] 간단하게 알아보는 웹팩 데브 서버 설정 및 사용방법

 

webpack-dev-server를 켜 놓으면 코드의 변경사항을 감지해서 브라우저에 변경된 점을 자동으로 반영해 줍니다.

 

webpack-dev-server를 사용해서 개발하면, 매번 빌드하는 명령어를 입력하고, 빌드를 기다릴 필요가 없습니다.

배포를 할 경우에만, 빌드를 해서 결과물을 받아서 서버에 넣으면 됩니다.

개발을 편하게 하려고 사용하는게 webpack-dev-server입니다.

 

webpack-dev-server의 원리는 컴퓨터 메모리 상으로만 빌드한 결과물을 만들어서 브라우저에 웹팩 빌드 결과물을 전달합니다.

 

1. 설치

npm i -D webpack-dev-server

설치가 완료되면, package.json에 devDependencies 객체에 webpack-dev-server가 추가되었습니다.

버전이 안 맞아서 발생하는 오류가 있습니다. 아래 제가 사용한 버전으로 설치하면, 작동할 겁니다.

 

2. package.json 설정

package.json 파일에서 script객체에 명령어를 작성해 줍니다.

dev: "webpack-dev-server"

여기서 키값인 'dev'는 다른 이름으로 해도 됩니다.

 

 

 

3. 터미널을 열고 프로젝트 경로에서 명령어를 실행합니다.

npm run dev

 

 

@ webpack-dev-server로 실행되는 port를 설정할 수 있습니다.

webpack-config.js에서 아래처럼 입력하면 됩니다.

module.exports = {
  //...
  devServer: {
   port: 9000
  }
}