Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs ecc

Sto iniziando a lavorare con webpackun node/expressambiente che sviluppa ReactJSun'applicazione renderizzata lato server con react-router. Sono molto confuso sul ruolo di ogni pacchetto webpack per gli ambienti dev e prod (runtime).

Ecco il riassunto della mia comprensione:

webpack: È un pacchetto, uno strumento per unire diversi pezzi di un'applicazione web e raggrupparli in un unico file .js (normalmente bundle.js). Il file dei risultati viene quindi servito in un ambiente prod per essere caricato dall'applicazione e contiene tutti i componenti necessari per eseguire il codice. Le caratteristiche includono la riduzione del codice, la minimizzazione, ecc.

webpack-dev-server: È un pacchetto che offre un server per elaborare i file del sito web. Crea anche un singolo file .js ( bundle.js) dai componenti client ma lo serve in memoria. Ha anche l'opzione ( -hot) per monitorare tutti i file di costruzione e creare un nuovo bundle in memoria in caso di modifiche al codice. Il server è servito direttamente nel browser (es:) http:/localhost:8080/webpack-dev-server/whatever. La combinazione di caricamento in memoria, elaborazione a caldo e servizio browser consente all'utente di aggiornare l'applicazione sul browser quando il codice cambia, ideale per l'ambiente di sviluppo.

Se ho dubbi sul testo di cui sopra, non sono davvero sicuro del contenuto di seguito, quindi per favore avvisami se necessario

Un problema comune quando si utilizza webpack-dev-servercon node/expressè che webpack-dev-serverè un server, così com'è node/express. Ciò rende questo ambiente difficile da eseguire sia sul client che su alcuni codici node / express (un'API ecc.). NOTA: questo è ciò che ho affrontato, ma sarebbe bello capire perché ciò accade in modo più dettagliato ...

webpack-dev-middleware: Si tratta di un middleware con le stesse funzioni di webpack-dev-server(bundling inmemory, hot reloading), ma in un formato che può essere inserito server/expressnell'applicazione. In questo modo, hai una sorta di server (il webpack-dev-server) interno al server del nodo. Oops: è un sogno folle ??? Come può questo pezzo risolvere l'equazione dev e prod e rendere la vita più semplice

webpack-hot-middleware: Questo ... Bloccato qui ... webpack-dev-middlewareho trovato questo pezzo durante la ricerca ... Non ho idea di come usarlo.

NOTA FINALE: Scusa se c'è qualche pensiero sbagliato. Ho davvero bisogno di aiuto per comprendere queste varianti in un ambiente complesso. Se opportuno, aggiungi altri pacchetti / dati che costruiranno l'intero scenario.

webpack

Come hai descritto, Webpack è un bundler di moduli, raggruppa vari formati di moduli principalmente in modo che possano essere eseguiti in un browser. Offre sia una CLI che un'API di nodo .

webpack-dev-middleware

Webpack Dev Middleware è un middleware che può essere montato in un server rapido per servire l' ultima compilazione del tuo bundle durante lo sviluppo. Questo utilizza webpackl'API del nodo di in modalità watch e invece di inviare l'output al file system, l' output in memoria .

Per fare un confronto, potresti usare qualcosa di simile al express.staticposto di questo middleware in produzione.

webpack-dev-server

Webpack Dev Server è esso stesso un server espresso che utilizza webpack-dev-middlewareper servire l'ultimo pacchetto e gestisce inoltre le richieste di sostituzione del modulo a caldo (HMR) per gli aggiornamenti del modulo in tempo reale nel client.

webpack-hot-middleware

Webpack Hot Middleware è un'alternativa a, webpack-dev-serverma invece di avviare un server stesso, ti consente di montarlo in un server Express esistente / personalizzato accanto webpack-dev-middleware.

Anche...

webpack-hot-server-middleware

Giusto per confondere ancora di più le cose, c'è anche Webpack Hot Server Middleware che è progettato per essere utilizzato insieme webpack-dev-middlewaree webpack-hot-middlewareper gestire la sostituzione del modulo a caldo delle app di rendering del server.

A partire dall'aggiornamento nel 2018 e considerando la nota webpack-dev-server sulla sua pagina GitHub ufficiale:

Progetto in manutenzione Si noti che webpack-dev-server è attualmente in modalità di sola manutenzione e non accetterà alcuna funzionalità aggiuntiva a breve termine. La maggior parte delle nuove richieste di funzionalità può essere soddisfatta con il middleware Express; si prega di esaminare l'utilizzo degli hook prima e dopo nella documentazione.

Quale sarebbe la scelta naturale per costruire un webpack HMR?