znaczacy > comp.lang.* > comp.lang.javascript

Roman Tyczka (23.12.2018, 21:37)
Witam,

Zamierzam zakumac te fjufasne narzedzia webdeveloperskiego swiata i czytam
aktualnie o webpacku.
W artykule autor pisze o tym, ze webpack (w jednej z opcji) pakuje
wszystkie pliki w jeden JS. Czyli takze CSS. Nie tlumaczy jednak jak to w
praktyce wyglada, czyli jak style z pliku JS wedruja do przegladarki i
HTMLa. Czy moze mi to ktos w zolnierskich slowach wyjasnic?
NotBear (31.12.2018, 01:35)
W dniu 2018-12-23 o 20:37, Roman Tyczka pisze:
> Czy moze mi to ktos w zolnierskich slowach wyjasnic?


Webpack to tzw module bundler. Analizuje dostepne w zrodlach moduly JS,
rozwiazuje zaleznosci i tworzy plik (bundle) zawierajacy caly kod,
odpowiednio zorganizowany. W miedzyczasie moze przeprowadzic szereg
optymalizacji, ale to juz temat rzeka.

W wynikowym html taki bundle wola sie typowo:
<body>
<script src="bundle.js"></script>
</body>

Z pomoca odpowiednich loaderow, Webpack potrafi rowniez "bundlowac" CSS
oraz binaria enkodowane base64. Do html trafiaja one banalnie:
createElement()/appendChild.
Roman Tyczka (07.01.2019, 16:00)
On Mon, 31 Dec 2018 00:35:13 +0100, NotBear wrote:

[..]
> Z pomoca odpowiednich loaderow, Webpack potrafi rowniez "bundlowac" CSS
> oraz binaria enkodowane base64. Do html trafiaja one banalnie:
> createElement()/appendChild.


Dzieki, powoli kumam coraz wiecej.
I musze sie podzielic swoim niemal zachwytem nad tym calym ekosystemem,
zarówno npm, jak i webpacka. No i VSCode jest przegeninalnym edytorem.
Konfiguracja tego wszystkiego to dosc zmudna i skomplikowana sprawa, idzie
mi jeszcze wolno, ale pokonuje kolejne przeszkody i zdobywam wiedze.

Pewnie bede tu dopytywal o rózne detale, których nie ogarne, ale póki co
jakos sobie radze.
Borys Pogorelo (07.01.2019, 16:23)
Dnia Mon, 7 Jan 2019 15:00:46 +0100, Roman Tyczka napisal(a):

> Dzieki, powoli kumam coraz wiecej.
> I musze sie podzielic swoim niemal zachwytem nad tym calym ekosystemem,
> zarówno npm, jak i webpacka.


Nie martw sie, jeszcze Ci przejdzie jak juz poznasz blizej ten domek z kart
;)
Roman Tyczka (07.01.2019, 22:00)
On Mon, 7 Jan 2019 15:23:09 +0100, Borys Pogorelo wrote:

>> Dzieki, powoli kumam coraz wiecej.
>> I musze sie podzielic swoim niemal zachwytem nad tym calym ekosystemem,
>> zarówno npm, jak i webpacka.

> Nie martw sie, jeszcze Ci przejdzie jak juz poznasz blizej ten domek z kart
> ;)


Ide po wyboistej drodze, nie podkladaj mi nogi ;-)

Pytanie na sniadanie:
- jesli webpack sluzy do bandlowania wszystkich plików, w tym html, i
potrafi przy tym w html wsadzic odwolania do CSS i JS, to jak to pogodzic z
PHP w tle, który ten html generuje np. z szablonu wsadzajac jakies dane?
Borys Pogorelo (11.01.2019, 13:44)
Dnia Mon, 7 Jan 2019 21:00:15 +0100, Roman Tyczka napisal(a):

> Pytanie na sniadanie:
> - jesli webpack sluzy do bandlowania wszystkich plików, w tym html, i
> potrafi przy tym w html wsadzic odwolania do CSS i JS, to jak to pogodzic z
> PHP w tle, który ten html generuje np. z szablonu wsadzajac jakies dane?


To juz nie jest kwestia webpacka, tylko tego jak rozwiazujesz kwestie
widoku w swojej aplikacji. Webpack tylko polaczy to, co mu podasz.
Roman Tyczka (11.01.2019, 14:18)
On Fri, 11 Jan 2019 12:44:10 +0100, Borys Pogorelo wrote:

> Dnia Mon, 7 Jan 2019 21:00:15 +0100, Roman Tyczka napisal(a):
> To juz nie jest kwestia webpacka, tylko tego jak rozwiazujesz kwestie
> widoku w swojej aplikacji. Webpack tylko polaczy to, co mu podasz.


W PHP mam pliki szablonów html, które przetwarzam za pomoca Mustache. PHP
wsadza tam pewne informacje, które sa potrzebne po stronie browsera. Do
tego musze pozenic webpacka.
Po zastanowieniu wymyslilem, ze bede to robil tak, ze webpack bedzie
przetwarzal te szablony mustache i robil w nich swoja robote, a potem PHP
juz na tych przetworzonych przez webpacka szablonach bedzie operowal i
generowal html-e, czy to sie klei?
Borys Pogorelo (11.01.2019, 14:38)
Dnia Fri, 11 Jan 2019 13:18:06 +0100, Roman Tyczka napisal(a):

> tego musze pozenic webpacka.
> Po zastanowieniu wymyslilem, ze bede to robil tak, ze webpack bedzie
> przetwarzal te szablony mustache i robil w nich swoja robote, a potem PHP
> juz na tych przetworzonych przez webpacka szablonach bedzie operowal i
> generowal html-e, czy to sie klei?


Nie, zupelnie nie. Wyglada na próbe wcisniecia webpacka do procesu tylko
dlatego, ze masz nowa zabawke i próbujesz ja wykorzystac. Zadaniem webpacka
jest tylko poskladanie zasobów w ladne paczki + dostarczenie paru ciekawych
funkcjonalnosci z tym zwiazanych (tree shaking, hot module replacement,
itd.).

PHP niech zajmie sie generowaniem gotowych szablonów jak to bylo do tej
pory albo niech dostarcza dane dla widoków. A wtedy obsluga widoku to jest
zadanie dla zupelnie innego narzedzia.
Roman Tyczka (11.01.2019, 15:28)
On Fri, 11 Jan 2019 13:38:31 +0100, Borys Pogorelo wrote:

> Nie, zupelnie nie. Wyglada na próbe wcisniecia webpacka do procesu tylko
> dlatego, ze masz nowa zabawke i próbujesz ja wykorzystac. Zadaniem webpacka
> jest tylko poskladanie zasobów w ladne paczki + dostarczenie paru ciekawych
> funkcjonalnosci z tym zwiazanych (tree shaking, hot module replacement,
> itd.).


Webpacka wybralem dlatego, ze poza taskami umozliwia sporo wiecej, wiec
jesli juz czegos sie mialem uczyc to wybralem jego, ale najwazniejsze sa
taski typu transpilacja, minifikacja, polyfikacja itd. Dzieki temu moge
apke w JS rozbic na moduly (jak w kazdym normalnym jezyku) oraz nie kopac
sie ze starymi standardami tylko pisac w ES6, co daje duzo wygody i
prostoty (relatywnie).

> PHP niech zajmie sie generowaniem gotowych szablonów jak to bylo do tej
> pory


Ok, ale jesli w tych szablonach ma byc odniesienie do plików JS czy CSS to
jak to pogodzic bez automatycznego ich includowania?

> albo niech dostarcza dane dla widoków. A wtedy obsluga widoku to jest
> zadanie dla zupelnie innego narzedzia.


Nie uzywam zadnych frameworków, bo jeszcze jestem za chudy w uszach, nawet
MVC nie wiem jak dobrze zrobic, na razie ten obszar kuleje i nie potrafie
zrobic tego dobrze, np. nie mam bladego pojecia jak dostarczac dane do
widoków w PHP.
Borys Pogorelo (11.01.2019, 18:17)
Dnia Fri, 11 Jan 2019 14:28:30 +0100, Roman Tyczka napisal(a):

> Webpacka wybralem dlatego, ze poza taskami umozliwia sporo wiecej, wiec
> jesli juz czegos sie mialem uczyc to wybralem jego, ale najwazniejsze sa
> taski typu transpilacja, minifikacja, polyfikacja itd. Dzieki temu moge
> apke w JS rozbic na moduly (jak w kazdym normalnym jezyku) oraz nie kopac
> sie ze starymi standardami tylko pisac w ES6, co daje duzo wygody i
> prostoty (relatywnie).


Tylko to nie jest akurat wyróznik webpacka, to samo zrobisz gulpem, gruntem
czy nawet skryptami shella. Ba, nawet mozesz webpacka wpiac w proces budowy
gulpa czy grunta, jesli wolisz proceduralnie to opisywac, a nadal korzystac
z webpacka do budowy modulów JS.

> Ok, ale jesli w tych szablonach ma byc odniesienie do plików JS czy CSS to
> jak to pogodzic bez automatycznego ich includowania?


Nie bardzo rozumiem problem - sciezki do plików chyba znasz?

> Nie uzywam zadnych frameworków, bo jeszcze jestem za chudy w uszach, nawet
> MVC nie wiem jak dobrze zrobic, na razie ten obszar kuleje i nie potrafie
> zrobic tego dobrze, np. nie mam bladego pojecia jak dostarczac dane do
> widoków w PHP.


PHP niech sie zajmie dostarczaniem danych albo generowaniem calych widoków.
Bo wydaje mi sie, ze chcesz tu odwócic role.
Podobne wątki