반응형
Nest.js에서 dev모드로 서버를 실행시키면 hot reload가 동작하는데, 코드가 수정되면 서버를 새로 실행시킨다.
이러한 방법은 서버가 커질수록, 초기 실행시 실행되는 함수가 많을수록 점점 느려지기 마련이다.
Nest 공식 문서에서는 이러한 점을 보완하기 위하여 변경사항만 업데이트 되는 방법을 설명해놓고 있다.
설정 방법은 Nest CLI로 생성한 프로젝트와 그렇지 않은 프로젝트 두가지로 나뉘는데, 나는 Nest CLI를 사용을 하기 때문에 Nest CLI의 경우에만 설명하겠다.
Installation
어차피 개발할때만 사용할것이기 때문에 dev로 설치한다.
yarn add -D webpack-node-externals run-script-webpack-plugin webpack
webpack-hmr.config.ts
해당 파일을 프로젝트 루트 경로에 만들어준다.
코드를 보면 plugins에 HotModuleReplacementPlugin, WatchIgnorePlugin, RunScriptWebpackPlugin의 인스턴스를 추가해주고 있다.
Nest CLI에서 사용하는 웹팩 설정을 이 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 }),
],
};
};
main.ts
module.hot 관련 로직을 추가한다.
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"
Reference
반응형
