webpack-dev-server로 프론트엔드 개발 서버 띄우기

선행 지식인 webpack에 대해서는 이전 포스팅을 참조하면 좋을 것 같습니다.

webpack-dev-server란?

webpack-dev-server는 매 코드 변경마다 빌드된 결과물을 확인할 수 있는 개발용 서버를 제공해줍니다.

실제 빌드는 시간이 오래 걸리기 때문에 webpack-dev-server는 실제 번들링 된 결과물을 파일로 생성하지 않고 메모리에 올려놓은 채 보여줍니다. 그래서 빠른 속도로 즉시 변경된 코드를 개발 서버에 반영하여 보여줄 수 있습니다.

webpack-dev-server 실습은 이전 포스팅에서 했던 실습을 이어서 진행합니다. 따라서 이전 실습을 다 마친 상태의 프로젝트 폴더를 준비해주세요.

그러면 이어서 webpack-dev-server를 설치합니다. 터미널을 켜고 해당 프로젝트 경로로 이동 후 다음 명령어를 실행해주세요.

yarn add -D webpack-dev-server

다음으로 config 파일에 dev server 설정 코드를 추가해줍니다.

* webpack.config.js

module.exports = {
  // ...
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"),
    },
    port: 3000,
  },
};

dev server가 주시할 directory를 설정하고 3000번 포트를 생성하는 설정입니다. 이제 3000번 포트로 접속하면 개발 서버에 접속할 수 있습니다. 디렉토리는 번들링 된 결과물이 저장되는 빌드 폴더를 지정합니다.

다음으로 dev server를 실행시킬 명령어를 작성합니다.

* package.json

"scripts": {
  "start": "webpack serve --open --mode=development --hot"
}

webpack serve는 개발 서버를 여는 명령어입니다.

--open은 브라우저를 열어주는 옵션입니다. 이 옵션이 있으면 명령어 실행 시 자동으로 브라우저를 열어서 개발 서버에 접속해줍니다.

개발용 서버이므로 --mode=development를 추가해줍니다.

--hot은 코드가 변경될 때마다 자동으로 변경사항을 브라우저에 반영해서 보여주는 옵션입니다. 이 옵션이 있으면 브라우저에서 수동으로 새로고침을 누를 필요가 없어집니다.

터미널에서 만든 명령어를 실행해봅니다.

yarn start

브라우저가 열리고 localhost:3000에 접속하여 리소스들이 제대로 불러와졌으면 성공입니다.