热重载
热重载
对应用程序启动过程影响最大的是 TypeScript 编译。幸运的是，通过 webpack HMR（热模块替换），我们不需要在每次发生更改时重新编译整个项目。这大大减少了实例化应用程序所需的时间，并使迭代开发变得更加容易。
warning 警告 请注意，
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
info 提示 如果您使用 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 }),
],
};
};
info 提示 对于 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
info 提示 如果您使用 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',
},
};
info 提示 对于 Yarn Berry（不是经典 Yarn），不要在
externals配置属性中使用nodeExternals，而是使用webpack-pnp-externals包中的WebpackPnpExternals：WebpackPnpExternals({{ '{' }} exclude: ['webpack/hot/poll?100'] {{ '}' }})。
此配置告诉 webpack 关于您的应用程序的一些基本信息：入口文件的位置、应该使用哪个目录来保存编译文件，以及我们想要使用什么样的加载器来编译源文件。通常，即使您不完全理解所有选项，也应该能够按原样使用此文件。
热模块替换
要启用 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
示例
可以在这里找到一个工作示例。