Nest - Hot Reload with CLI

Nest 공식 문서를 바탕으로 정리한 게시글입니다.

 

---

 

애플리케이션 부트스트랩 프로세스에 가장 큰 영향을 끼치는 것이 바로 Typescript 컴파일이다. 

Express 프레임워크로 개발했던 사람이라면 nodemon이 무엇인지 알텐데, 코드의 변경 사항이 생기면 자동으로 노드 애플리케이션을 재시작해주는 모듈이다. 

Nest에서는 webpack HRM(Hot-Module Replacement)을 사용하면 변경 사항이 발생할 때마다 전체 프로젝트를 다시 컴파일 할 필요가 없다. 

이렇게 하면, 애플리케이션을 인스턴스화하는데 필요한 시간이 크게 줄어들고 반복 개발이 훨씬 쉬어진다.

 

Installation

 

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

$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

 

Configuration

 

설치가 완료되면 애플리케이션의 루트 디렉토리에 webpack-hmr.config.js 파일을 만든다.

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename }),
    ],
  };
};

 

그 다음 HMR을 활성화하려면 main.ts 파일을 열고 다음 웹팩 관련 지침을 추가하자.

 

declare const module: any;

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

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

 

그 다음, 실행 프로세스를 단순화하려면 package.json 파일에 스크립트를 추가하자.

 

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"