webpack을 사용할 때 불편한 점이 코드가 수정이 될 때마다 번들링을 다시 해주어야 한다는 것이다.
webpack에는 이런 불편함을 해결해 줄 옵션들이 있는데 그 중 webpack-dev-server가 가장 많이 사용된다.

webpack-dev-server

webpack-dev-server는 간단한 웹 서버와 실시간 다시 로딩 기능을 제공한다.

설치

npm install webpack-dev-server

설정 - webpack.config.js

module.exports = {
  ...,
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 3000,
    hot: true,
    historyApiFallback: true,
    open: true
  },
};

• static : 정적 파일의 위치를 지정한다.
  - 단일 디렉터리 : static : ['assets']
  - 다중 디렉터리 : static : ['assets', 'css']
  - static.directory : 서버에 제공할 정적 파일의 위치를 알려준다.
• compress : gzip 압축을 해서 서버에 제공할 건지 지정한다.
• port : 포트를 지정한다.
  - 기본 : 8080
  - 여유 포트 사용 : port : auto
• hot : Hot Module Replacement 기능을 활성화 한다.

  Hot Module Replacement(HMR)는 브라우저를 새로고침 하지 않아도 webpack으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정이다.

• historyApiFallback : HTML5의 History API를 사용할 때 404페이지 대신 index.html 페이지가 뜨게 하는 설정이다.
• open : 서버가 시작된 후 기본 브라우저를 자동으로 열어주는 설정이다.
  - 지정된 페이지 열기 : open: ['/my-page']
  - 지정된 여러 페이지 열기 : open: ['/my-page', '/another-page']

실행

npx webpack serve

참고

webpack 공식 문서 - DevServer
webpack 공식 문서 - HMR
웹팩 핸드북 - HMR