Feb 13, 2022 - nestJS 프로젝트 hot reload 세팅

*2월13일

 

-express 프로젝트의 nodemon과 같은 역할을 하는 hot reload. 아래 nest.js 공식 문서 링크에 아주 잘 나와 있다.

 

https://docs.nestjs.com/recipes/hot-reload

Documentation | NestJS - A progressive Node.js framework

 

-간단하게 처리하는 방법을 나열해보자면,

 

1.

$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack // or yarn add

 

2.

root directory에 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 }),
    ],
  };
};

 

3.

main.ts에 하단 코드들 추가

 

declare const module: any;

 

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

 

 

4.

package.json script에 "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"로 변경 후

 

npm run start:dev or yarn run start:dev

 

 

5.

프로젝트 수정 사항 감지 시, 하기와 같이 hot-module replacement가 잘 작동하는 모습이다.