Webpack - po co?

Question

Od kilku godzin uczę się webpacka. Rozumiem że analizuje wszystkie pliki i skleja to do tzw. bundla.

Czy został stworzony po to aby javaScript pisany w node.js mógł zostać przeniesiony tak jakby do przeglądarki?

Answer 1

Nie, jego przeznaczenie jest inne :) Generalnie wyobraź sobie, że masz aplikację produkcyjną i musisz przeważnie zrobić kilka kroków:

1. sprawdzenie linterem
2. transpilacja kodu JavaScript np. do ES5
3. minifikacja kodu JS
4. dodanie ewentualnych polyfilli
5. przetworzenie kodu scss preprocesorem na plik css
6. dodanie prefixów np. autoprefixerem
7. minifikacja kodu css
8. minifikacja kodu html
9. ewentuane zbudowanie buildów częściowych, aby serwować je stopniowo do usera

znalazłoby się jeszcze parę elementów, np. odpowiednie budowanie paczek dla różnych wersji językowych itp. itd. Możesz to robić:

1. ręcznie - ale chyba sam czujesz, że to nie najlepsza opcja :)
2. pluginami do edytora/IDE - ale uzależniasz się od edytora i jego konkretnej konfiguracji, niepotrzebnie
3. odpowiednimi skryptami odpalanymi kolejno np. z konsoli...  - ok, jeszcze dopuszczalne, ale gdy tych kroków jest aż tyle to staje się to uciążliwe i łatwo o jakimś kroku zapomnieć
4. użyć gotowego narzędzia do wykonania całego procesu, np. webpack, gulp itp. :)

Generalnie patrz na to w ten sposób - jeśli jakieś operacje powtarzasz często, to na pewno da się zrobić dla nich automat, i właśnie webpack jest w pewnym sensie takim automatem. Nie wyobrażam sobie, abym w pracy miał siedzieć co chwilę w konsoli i ręcznie wywoływać transpilację, preprocesory css itp. itd. gdy robi się to czasami kilkadziesiąt razy dziennie... tu właśnie wkracza webpack :)

Co więcej, webpack pozwala Ci też odpalić go raz i potem przy każdej zmianie w plikach jakie nasłuchuje, webpack automatycznie zrobi co trzeba i możesz od razu widzieć efekt w przeglądarce - niesamowite ułatwienie pracy. Tutaj poczytaj o webpack dev server: https://webpack.js.org/configuration/dev-server/