## 熱重載 對應用程序的引導過程影響最大的是 `TypeScript` 編譯。但問題是，每次發生變化時，我們是否必須重新編譯整個項目？一點也不。這就是為什么 [webpack](https://github.com/webpack/webpack) `HMR`（Hot-Module Replacement）大大減少了實例化您的應用程序所需的時間。 > 請注意，`webpack`這不會自動將（例如 `graphql` 文件）復制到 `dist` 文件夾中。類似地，`webpack` 與全局靜態路徑（例如中的 `entities` 屬性 `TypeOrmModule` ）不兼容。 ### CLI 如果使用的是 `Nest CLI`，則配置過程非常簡單。`CLI` 包裝 `webpack`，允許使用 `HotModuleReplacementPlugin`。 ### 安裝 首先，我們安裝所需的軟件包： ```bash $ npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack ``` ### 配置（Configuration） 然后，我們需要創建一個` webpack-hmr.config.js`，它是webpack的一個配置文件，并將其放入根目錄。 ```typescript 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 }), ], }; }; ``` 此函數獲取包含默認 `webpack` 配置的原始對象，并返回一個已修改的對象和一個已應用的 `HotModuleReplacementPlugin` 插件。 ### 熱模塊更換 為了啟用 `HMR`，請打開應用程序入口文件（ `main.ts` ）并添加一些與 `Webpack`相關的說明，如下所示： ```typescript 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` 文件的腳本中。 ```json "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch" ``` 現在只需打開你的命令行并運行下面的命令： ```bash $ npm run start:dev ``` ### 沒有使用 CLI 如果您沒有使用 `Nest CLI` ，配置將稍微復雜一些(需要更多的手動步驟)。 ### 安裝 首先安裝所需的軟件包： ```bash $ npm i --save-dev webpack webpack-cli webpack-node-externals ts-loader run-script-webpack-plugin ``` ### 配置 然后，我們需要創建一個` webpack.config.js`，它是 `webpack` 的一個配置文件，并將其放入根目錄。 ```typescript 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' }), ], output: { path: path.join(__dirname, 'dist'), filename: 'server.js', }, }; ``` 這個配置告訴 `webpack` 關于我們的應用程序的一些基本信息。入口文件位于何處，應使用哪個目錄保存已編譯的文件，以及我們要使用哪種裝載程序來編譯源文件。基本上，您不必擔心太多，根本不需要了解該文件的內容。 ### 熱模塊更換 為了啟用 `HMR` ，我們必須打開應用程序入口文件（ `main.ts` ），并添加一些與 `Webpack` 相關的說明。 ```typescript 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` 文件中。 ```bash "start:dev": "webpack --config webpack.config.js --watch" ``` 現在，只需打開命令行并運行以下命令： ```bash $ npm run start:dev ``` [這里](https://github.com/nestjs/nest/tree/master/sample/08-webpack)有一個可用的例子