> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app/configure-dev-server.md).

# 개발 서버 구성

## 1. Webpack Dev Server 설치

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

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i webpack-dev-server -D
```

{% endtab %}
{% endtabs %}

## 2. devServer 설정

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

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
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,
    },
  }
}
```

{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="package.json" %}

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

{% endtab %}
{% endtabs %}