> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://yamoo9.gitbook.io/webpack/react/create-your-own-react-app/configure-dev-server.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.