Hot Reload (Webpack)

Hot Reload (Webpack)

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

Installation

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

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

Configuration

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

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)을 열고 몇 가지 중요한 사항을 추가해야합니다.

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에 이 두 줄을 추가하십시오.

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

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

$ npm run webpack

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

$ npm run start

실제 사례는 여기에서 확인할 수 있습니다.