nestjs学习笔记（二）：使用webpack热重载

搭建步骤

nestjs环境以及脚手架的搭建可以参考我第一篇文章：
nestjs学习笔记（一）环境搭建与模式粗略分析

在完成nest的初次搭建后，为了便于我们开发，通常我们需要使用热重载。
这里是简单的使用wepback进行热重载的办法。

进入你的nestjs工程目录：

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

安装所需webpack依赖。
在项目根目录建立webpack.config.js，将以下配置code复制进去
(注：使用nestjs脚手架的情况下直接可以使用，如果程序入口文件不同， 请更改下面代码的entry第二个参数)

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',
  },
};

将这两行代码添加进package.json的scripts属性下

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

此外，还需要在程序的入口文件（我的是src/main.ts) 下添加以下代码：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

declare const module: any;

// 引导程序
const bootstrap = async () => {
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);

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

bootstrap();

大致就是判断一下全局module对象中是否注入了hot对象，然后执行热重载。

好我们的配置工作结束。

运行步骤

打开一个窗口运行 npm run wepback
成功后打开第二个窗口运行 npm run webpack-start

image.png

得到对应提示说明热更新启动成功。

git的提交问题

因为使用webpack的热重载会编译出很多不需要提交的文件，我们在项目根目录建立 .gitignore 文件用于忽略这部分的提交

# 这行是注释
dist/
node_modules/

本文章参考了腾讯云文档，点这里访问原文