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

96

Zaczynam pracę z webpackze node/expressśrodowiskiem rozwijającym się ReactJSpo stronie serwera aplikacji ze świadczonych react-router. Jestem bardzo zdezorientowany co do roli każdego pakietu webpack w środowiskach deweloperskich i prod (runtime).

Oto podsumowanie mojego zrozumienia:

webpack: Jest pakietem, narzędziem do łączenia różnych elementów aplikacji internetowej i umieszczania ich w jednym pliku .js (zwykle bundle.js). Plik wynikowy jest następnie udostępniany w środowisku produkcyjnym w celu załadowania przez aplikację i zawiera wszystkie niezbędne komponenty do uruchomienia kodu. Funkcje obejmują zmniejszanie kodu, minifikację itp.

webpack-dev-server: To pakiet oferujący serwerowi przetwarzanie plików witryny internetowej. Tworzy również pojedynczy plik .js ( bundle.js) z komponentów klienta, ale podaje go w pamięci. Ma również opcję ( -hot), aby monitorować wszystkie pliki budowania i budować nowy pakiet w pamięci w przypadku zmian w kodzie. Serwer jest obsługiwany bezpośrednio w przeglądarce (np.:) http:/localhost:8080/webpack-dev-server/whatever. Połączenie ładowania pamięci, przetwarzania na gorąco i obsługi przeglądarki pozwala użytkownikowi zaktualizować aplikację w przeglądarce, gdy zmienia się kod, co jest idealne dla środowiska programistycznego.

Jeśli mam wątpliwości co do powyższego tekstu, to naprawdę nie jestem pewien co do treści poniżej, więc w razie potrzeby proszę o informację

Częstym problemem podczas używania programu webpack-dev-serverz node/expressjest to, że webpack-dev-serverjest to serwer node/express. To sprawia, że ​​to środowisko jest trudne do uruchomienia zarówno klienta, jak i kodu węzła / ekspresu (API itp.). UWAGA: To jest to, z czym miałem do czynienia, ale wspaniale byłoby zrozumieć, dlaczego dzieje się to bardziej szczegółowo ...

webpack-dev-middleware: Jest to oprogramowanie pośredniczące z tymi samymi funkcjami webpack-dev-server(łączenie w pamięci, ponowne ładowanie na gorąco), ale w formacie, który można wstrzyknąć do server/expressaplikacji. W ten sposób masz swego rodzaju serwer (the webpack-dev-server) insider the node server. Ups: Czy to szalony sen ??? Jak ten kawałek może rozwiązać równanie deweloperskie i prod i uprościć życie

webpack-hot-middleware: To ... Utknąłem tutaj ... znalazłem ten kawałek, szukając webpack-dev-middleware... Nie mam pojęcia, jak go użyć.

ENDNOTE: Przepraszam, czy jest jakieś błędne myślenie. Naprawdę potrzebuję pomocy, aby zrozumieć te warianty w złożonym środowisku. Jeśli jest to wygodne, dodaj więcej pakietów / danych, które utworzą cały scenariusz.

javascript node.js webpack webpack-dev-server webpack-dev-middleware Mendes
źródło
2
Żaden z wymienionych tutaj pakietów nie jest używany po stronie serwera w środowisku produkcyjnym - to tylko narzędzia programistyczne. Używałbyś webpack-dev-middleware(i potencjalnie webpack-hot-middleware), gdybyś chciał napisać własny niestandardowy serwer programistyczny. Jeśli nie ma określonej funkcji, której chcesz, a webpack-dev-serverktórej nie masz, powinieneś po prostu jej użyć.
Joe Clay

Odpowiedzi:

122

webpack

Jak już opisałeś, Webpack jest pakietem modułów, zawiera różne formaty modułów, głównie po to, aby można je było uruchomić w przeglądarce. Oferuje zarówno CLI, jak i Node API .

webpack-dev-middleware

Oprogramowanie pośredniczące Webpack Dev to oprogramowanie pośredniczące, które można zainstalować na serwerze ekspresowym w celu obsługi najnowszej kompilacji pakietu podczas programowania. Używa webpackNode API w trybie obserwacyjnym i zamiast przesyłać dane do systemu plików, wysyła do pamięci .

Dla porównania możesz użyć czegoś takiego express.staticzamiast tego oprogramowania pośredniego w środowisku produkcyjnym.

webpack-dev-server

Webpack Dev Server sam w sobie jest serwerem ekspresowym , który webpack-dev-middlewareobsługuje najnowszy pakiet i dodatkowo obsługuje żądania wymiany modułów na gorąco (HMR) dla aktualizacji modułów na żywo w kliencie.

webpack-hot-middleware

Webpack Hot Middleware jest alternatywą dla webpack-dev-serversamego serwera, ale zamiast uruchamiać sam serwer, umożliwia zamontowanie go na istniejącym / niestandardowym serwerze ekspresowym obokwebpack-dev-middleware .

Również...

webpack-hot-server-middleware

Wystarczy mylić rzeczy nawet więcej, istnieje również WebPACK Hot Server Middleware, który jest przeznaczony do stosowania u boku webpack-dev-middlewarei webpack-hot-middlewaredo obsługi wymiany gorącą moduł serwera wygenerowana aplikacji.

riscarrott
źródło
2
Dla tych, którzy szukają informacji na temat wymiany gorących modułów front-end i back-end, zobacz ten post: stackoverflow.com/questions/46086297/… Xlee wykonuje dobrą robotę wyjaśniając wymagania dla każdej strony - serwer wymaga ponownego uruchomienia , front-end umożliwiający ładowanie w zaktualizowanych paczkach javascript.
abelito
9

Od aktualizacji w 2018 roku i biorąc pod uwagę uwagę dotyczącą webpack-dev-server na oficjalnej stronie GitHub:

Projekt w trakcie konserwacji Należy pamiętać, że webpack-dev-server jest obecnie w trybie tylko do konserwacji i nie będzie przyjmować żadnych dodatkowych funkcji w najbliższym czasie. Większość nowych żądań funkcji można zrealizować za pomocą oprogramowania pośredniego Express; proszę przyjrzeć się używaniu haków przed i po w dokumentacji.

Jaki byłby naturalny wybór przy tworzeniu webpacka HMR?

Mendes
źródło
2
Mówi się również, że Use webpack-serve for a fast alternative. Use webpack-dev-server if you need to test on old browsers.możesz chcieć wypróbować usługę webpack .
Bruce Sun
3
Notatka konserwacyjna została usunięta. Więc myślę, że jest to zalecane ponownie ??? To denerwujące, że tak ważne narzędzie dla programistów ma wokół siebie tak okropny zespół konserwatorów.
Kapitan Fogetti,
5
webpack-serv jest przestarzały i jak powiedział @CaptainFogetti, informacja o konserwacji została usunięta z serwera webpack-dev-server na dzień dzisiejszy
Anoop D