nestjs Hot reload 초기설정

Hot reload

개발과정에서 코드를 수정 시 변경점을 적용해서 다시 빌드하고 리로드하는 기능
개발과정에서의 편리함을 주는 기능인데, nodemon같은 느낌
이를 nest에서 적용해보자.

1. 설치

> yarn add --save-dev webpack-node-externals run-script-webpack-plugin webpack

2. 설치 후 루트 디렌토리에 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, autoRestart: false }),
    ],
  };
};

근데 이렇게하면, webpack-hmr.config.js위 두 줄이 빨간줄이 나옴
그래서 .eslintrc.js에 아래 옵션을 추가한다.

'prettier/prettier': [
    'error',
    {
      endOfLine: 'auto',
    },
  ],
  '@typescript-eslint/no-var-requires': 0,

그러면 빨간줄 없어짐

3. package.json 수정

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

4. 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();