热重载

对应用启动过程影响最大的部分是 TypeScript 编译。幸运的是，借助 webpack 的 HMR（Hot-Module Replacement，热模块替换），我们不需要在每次变更发生时都重新编译整个项目。这会显著减少实例化应用所需的时间，也让迭代开发变得容易得多。

警告

请注意，webpack 不会自动将资源文件（例如 graphql 文件）复制到 dist 目录中。同样，webpack 也不兼容基于 glob 的静态路径（例如 TypeOrmModule 中的 entities 属性）。

配合 CLI 使用

如果你在使用 Nest CLI，配置过程会非常直接。CLI 对 webpack 进行了封装，因此可以使用 HotModuleReplacementPlugin。

安装

首先安装所需包：

$ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack

提示

如果你使用的是 Yarn Berry（不是经典 Yarn），请安装 webpack-pnp-externals 包，而不是 webpack-node-externals。

配置

安装完成后，在应用根目录下创建一个 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 }),
    ],
  };
};

提示

如果使用 Yarn Berry（不是经典 Yarn），则不要在 externals 配置项中使用 nodeExternals，而应改用 webpack-pnp-externals 包中的 WebpackPnpExternals：WebpackPnpExternals({ exclude: ['webpack/hot/poll?100'] })。

这个函数的第一个参数是包含默认 webpack 配置的原始对象，第二个参数是 Nest CLI 所使用的底层 webpack 包引用。它会返回一个修改后的 webpack 配置，其中包含 HotModuleReplacementPlugin、WatchIgnorePlugin 和 RunScriptWebpackPlugin 插件。

热模块替换

要启用 HMR，打开应用入口文件（main.ts），并添加以下与 webpack 相关的代码：

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT ?? 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"

现在只需打开命令行并运行以下命令：

$ npm run start:dev

不使用 CLI

如果你没有使用 Nest CLI，配置会稍微复杂一些（需要更多手动步骤）。

安装

首先安装所需包：

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

提示

如果你使用的是 Yarn Berry（不是经典 Yarn），请安装 webpack-pnp-externals 包，而不是 webpack-node-externals。

配置

安装完成后，在应用根目录下创建一个 webpack.config.js 文件。

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = {
  entry: ['webpack/hot/poll?100', './src/main.ts'],
  target: 'node',
  externals: [
    nodeExternals({
      allowlist: ['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(), new RunScriptWebpackPlugin({ name: 'server.js', autoRestart: false })],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'server.js',
  },
};

提示

如果使用 Yarn Berry（不是经典 Yarn），则不要在 externals 配置项中使用 nodeExternals，而应改用 webpack-pnp-externals 包中的 WebpackPnpExternals：WebpackPnpExternals({ exclude: ['webpack/hot/poll?100'] })。

该配置告诉 webpack 几个关于应用的关键信息：入口文件位置、编译产物输出目录，以及要使用哪种 loader 来编译源文件。通常情况下，即使你没有完全理解所有选项，也可以直接使用这个文件。

热模块替换

要启用 HMR，打开应用入口文件（main.ts），并添加以下与 webpack 相关的代码：

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.listen(process.env.PORT ?? 3000);

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

为了简化执行过程，请在 package.json 文件中添加一个脚本：

"start:dev": "webpack --config webpack.config.js --watch"

现在只需打开命令行并运行以下命令：

$ npm run start:dev

示例

一个可运行的示例见这里。