개발 서버 구성

1. Webpack Dev Server 설치

지금까지 애플리케이션의 프로덕션 빌드를 만들고 최적화하는 데 중점을 두었지만, Webpack은 핫 모듈 교체(HMR) 및 오류 보고 기능이 있는 개발 서버를 제공하고 있습니다. 이 서버를 사용하면 개발 프로세스에 도움이 됩니다.

패키지 설치

npm i webpack-dev-server -D

2. devServer 설정

devServer 구성을 설정하는 코드를 작성합니다.

webpack.config.js

module.exports = (_env, argv) => {
  // ...
  return {
    // 개발 서버 설정
    devServer: {
      // dist 디렉토리를 웹 서버의 기본 호스트 위치로 설정
      contentBase: path.resolve(__dirname, './dist'),
      // 인덱스 파일 설정
      index: 'index.html',
      // 포트 번호 설정
      port: 9000,
      // 핫 모듈 교체(HMR) 활성화 설정
      hot: true,
      // gzip 압축 활성화
      compress: true,
      // dist 디렉토리에 실제 파일 생성
      writeToDisk: true,
      // History 라우팅 대체 사용 설정
      historyApiFallback: true,
      // 개발 서버 자동 실행 설정
      open: true,
      // 오류 표시 설정
      overlay: true,
    },
  }
}

NPM 스크립트 start, dev, build 명령을 package.json 파일에 추가합니다.

package.json

{
  "scripts": {
    "start": "npm run dev -- --open",
    "dev": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack"
  },
}