webpack "--watch" vs "--hot": qual è la differenza?

Question

Qual è la differenza tra l'utilizzo

webpack --watch 

e

webpack-dev-server --hot 

grazie.

Answer 1

Secondo la documentazione webpack @https://webpack.github.io/docs/tutorials/getting-started/#watch-mode

Quando si utilizza la modalità orologio, webpack installa gli osservatori dei file a tutti i file, che sono stati utilizzati nel processo di compilazione. Se viene rilevata una modifica, eseguirà nuovamente la compilation. Quando la memorizzazione nella cache è abilitata, il webpack conserva ciascun modulo in memoria e lo riutilizza se non viene modificato.

Quindi, in sostanza, la differenza tra l'esecuzione webpack e webpack --watch è che nell'uso --watch, la tua CLI si bloccherà dopo il processo di compilazione in attesa di eventuali modifiche del codice nei file e se c'è un cambiamento, allora ricompilerà e attenderà di nuovo. È necessario essere consapevoli che se si sta utilizzando webpack-dev-server, quindi non è necessario utilizzare questa opzione perché webpack-dev-server utilizza la modalità orologio webpack di default in base alla relativa documentazione:

Il server dev usa la modalità orologio di webpack. Inoltre impedisce al web pack di emettere i file risultanti su disco. Invece conserva e serve i file risultanti dalla memoria.

Quindi, che cos'è webpack-dev-server --hot? Fondamentalmente, questo aggiunge il HotModuleReplacementPlugin alla configurazione del webpack, che essenzialmente ti permetterà di ricaricare solo il componente che viene modificato invece di fare un aggiornamento della pagina completa! Abbastanza dannatamente utile quando lavori con gli stati! Secondo la documentazione:

Ogni modalità supporta anche la sostituzione modulo hot in cui il fascio è notificato che un cambiamento è avvenuto invece di una pagina di ricarica completa. Un Hot Runtime di sostituzione modulo può quindi caricare i moduli aggiornati e iniettarli nell'app in esecuzione.

Maggiori informazioni su che cosa è e come usato qui: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

Spero che questo aiuta a comprendere webpack un po 'di più!