配置热重载

对应用程序的引导过程影响最大的是 TypeScript 编译。但问题是，每次发生变化时，我们是否必须重新编译整个项目？一点也不。这就是为什么 webpack HMR（Hot-Module Replacement）大大减少了实例化您的应用程序所需的时间。

如果使用的是 Nest CLI，则配置过程非常简单。CLI 包装 webpack，允许使用 HotModuleReplacementPlugin。

安装

首先，我们安装所需的软件包：

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

配置

然后，我们需要创建一个 webpack-hmr.config.js，它是webpack的一个配置文件，并将其放入根目录。

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 }),
    ],
  }
}

此函数获取包含默认 webpack 配置的原始对象，并返回一个已修改的对象和一个已应用的 HotModuleReplacementPlugin 插件。

热模块更换

为了启用 HMR，请打开应用程序入口文件（ main.ts ）并添加一些与 Webpack相关的说明，如下所示：

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"

现在只需打开你的命令行并运行下面的命令：

npm run start:dev

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。