Hot Reload

L’impact le plus important sur le processus de démarrage de votre application est la compilation TypeScript. Heureusement, avec webpack HMR (Hot-Module Replacement), nous n’avons pas besoin de recompiler l’ensemble du projet chaque fois qu’un changement se produit. Cela réduit considérablement le temps nécessaire à l’instanciation de votre application et facilite le développement itératif.

Avec CLI

Si vous utilisez le Nest CLI, le processus de configuration est assez simple. Le CLI enveloppe webpack, ce qui permet d’utiliser le HotModuleReplacementPlugin.

Installation

Tout d’abord, installez les paquets requis :

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

Configuration

Une fois l’installation terminée, créez un fichier webpack-hmr.config.js à la racine de votre application.

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

Cette fonction prend l’objet d’origine contenant la configuration webpack par défaut comme premier argument et la référence au paquet webpack sous-jacent utilisé par le Nest CLI comme second. De plus, elle retourne une configuration webpack modifiée avec les plugins HotModuleReplacementPlugin, WatchIgnorePlugin, et RunScriptWebpackPlugin.

Hot-Module Replacement

Pour activer HMR, ouvrez le fichier d’entrée de l’application (main.ts) et ajoutez les instructions liées à webpack suivantes :

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();

Pour simplifier le processus d’exécution, ajoutez un script à votre fichier package.json.

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch"

Maintenant, ouvrez simplement votre ligne de commande et exécutez la commande suivante :

$ npm run start:dev

Sans CLI

Si vous n’utilisez pas le Nest CLI, la configuration sera légèrement plus complexe (nécessitera plus d’étapes manuelles).

Installation

Tout d’abord, installez les paquets requis :

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

Configuration

Une fois l’installation terminée, créez un fichier webpack.config.js à la racine de votre application.

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

Cette configuration indique à webpack quelques éléments essentiels sur votre application : l’emplacement du fichier d’entrée, quel répertoire doit être utilisé pour contenir les fichiers compilés et quel type de loader nous voulons utiliser pour compiler les fichiers source. En général, vous devriez pouvoir utiliser ce fichier tel quel, même si vous ne comprenez pas entièrement toutes les options.