# Hot Reload (Webpack)

## Hot Reload (Webpack)

응용 프로그램의 부트 스트랩 프로세스에 가장 큰 영향을 미치는 것은 **TypeScript 컴파일**입니다. 그러나 문제는 변경이 발생할 때마다 전체 프로젝트를 다시 컴파일해야합니까? 전혀 아닙니다. 그렇기 때문에 [webpack](https://github.com/webpack/webpack) HMR (Hot-Module Replacement)은 응용 프로그램을 인스턴스화 하는 데 필요한 시간을 크게 줄입니다.

## Installation

먼저 필요한 패키지를 설치하자:

```bash
$ npm i --save-dev webpack webpack-cli webpack-node-externals ts-loader
```

## Configuration

그런 다음 웹팩의 구성 파일 인 `webpack.config.js`를 만들어 루트 디렉토리에 저장해야합니다.

```typescript
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: ['webpack/hot/poll?100', './src/main.ts'],
  watch: true,
  target: 'node',
  externals: [
    nodeExternals({
      whitelist: ['webpack/hot/poll?100'],
    }),
  ],
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  mode: 'development',
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'server.js',
  },
};
```

이 구성은 웹팩에 애플리케이션에 대한 몇가지 필수 사항을 알려줍니다. 어디에 엔트리 파일이 있고, **컴파일 된** 파일을 보유하기 위해 어떤 디렉토리를 사용해야 하며, 소스 파일을 컴파일하기 위해 어떤 종류의 로더를 사용하길 원하는지. 기본적으로 걱정할 필요가 없으며 이 파일의 내용을 전혀 이해할 필요가 없습니다.

## Hot-Module Replacement

**HMR**을 활성화하려면 Nest 응용 프로그램 항목 파일 (`main.ts`)을 열고 몇 가지 중요한 사항을 추가해야합니다.

```typescript
declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(ApplicationModule);
  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }
}
bootstrap();
```

그리고 그게 전부입니다. 실행 프로세스를 단순화하려면 `package.json` 파일의 `scripts`에 이 두 줄을 추가하십시오.

```javascript
"start": "node dist/server",
"webpack": "webpack --config webpack.config.js"
```

이제 명령 행을 열고 아래 명령을 실행하십시오 :

```bash
$ npm run webpack
```

웹팩이 **파일 watch** 를 시작하면 다른 명령행 창에서 다른 명령을 실행하십시오.

```bash
$ npm run start
```

실제 사례는 [여기](https://github.com/nestjs/nest/tree/master/sample/08-webpack)에서 확인할 수 있습니다.


---

# Agent Instructions: 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:

```
GET https://jakekwak.gitbook.io/nestjs/techniques/hot-reload-webpack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.