Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Webpack i otoczenie
17 views
Skip to first unread message
Roman Tyczka
Dec 23, 2018, 2:37:01 PM12/23/18
to
Witam,
Zamierzam zakumać te fjufaśne narzędzia webdeveloperskiego świata i czytam
aktualnie o webpacku.
W artykule autor pisze o tym, że webpack (w jednej z opcji) pakuje
wszystkie pliki w jeden JS. Czyli także CSS. Nie tłumaczy jednak jak to w
praktyce wygląda, czyli jak style z pliku JS wędrują do przeglądarki i
HTMLa. Czy może mi to ktoś w żołnierskich słowach wyjaśnić?
--
pozdrawiam
Roman Tyczka
Zamierzam zakumać te fjufaśne narzędzia webdeveloperskiego świata i czytam
aktualnie o webpacku.
W artykule autor pisze o tym, że webpack (w jednej z opcji) pakuje
wszystkie pliki w jeden JS. Czyli także CSS. Nie tłumaczy jednak jak to w
praktyce wygląda, czyli jak style z pliku JS wędrują do przeglądarki i
HTMLa. Czy może mi to ktoś w żołnierskich słowach wyjaśnić?
--
pozdrawiam
Roman Tyczka
NotBear
Dec 30, 2018, 6:35:15 PM12/30/18
to
W dniu 2018-12-23 o 20:37, Roman Tyczka pisze:
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.
--
NotBear
> Czy może mi to ktoś w żołnierskich słowach wyjaśnić?
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.
--
NotBear
Roman Tyczka
Jan 7, 2019, 9:00:47 AM1/7/19
to
I muszę się podzielić swoim niemal zachwytem nad tym całym ekosystemem,
zarówno npm, jak i webpacka. No i VSCode jest przegeninalnym edytorem.
Konfiguracja tego wszystkiego to dość żmudna i skomplikowana sprawa, idzie
mi jeszcze wolno, ale pokonuję kolejne przeszkody i zdobywam wiedzę.
Pewnie będę tu dopytywał o różne detale, których nie ogarnę, ale póki co
jakoś sobie radzę.
--
pozdrawiam
Roman Tyczka
Borys Pogoreło
Jan 7, 2019, 9:23:00 AM1/7/19
to
Dnia Mon, 7 Jan 2019 15:00:46 +0100, Roman Tyczka napisał(a):
> Dzięki, powoli kumam coraz więcej.
> I muszę się podzielić swoim niemal zachwytem nad tym całym ekosystemem,
> zarówno npm, jak i webpacka.
Nie martw się, jeszcze Ci przejdzie jak już poznasz bliżej ten domek z kart
> Dzięki, powoli kumam coraz więcej.
> I muszę się podzielić swoim niemal zachwytem nad tym całym ekosystemem,
> zarówno npm, jak i webpacka.
;)
--
Borys Pogoreło
borys(#)leszno,edu,pl
Roman Tyczka
Jan 7, 2019, 3:00:16 PM1/7/19
to
On Mon, 7 Jan 2019 15:23:09 +0100, Borys Pogoreło wrote:
>> Dzięki, powoli kumam coraz więcej.
>> I muszę się podzielić swoim niemal zachwytem nad tym całym ekosystemem,
>> zarówno npm, jak i webpacka.
>
> Nie martw się, jeszcze Ci przejdzie jak już poznasz bliżej ten domek z kart
> ;)
Idę po wyboistej drodze, nie podkladaj mi nogi ;-)
>> Dzięki, powoli kumam coraz więcej.
>> I muszę się podzielić swoim niemal zachwytem nad tym całym ekosystemem,
>> zarówno npm, jak i webpacka.
>
> Nie martw się, jeszcze Ci przejdzie jak już poznasz bliżej ten domek z kart
> ;)
Pytanie na śniadanie:
- jeśli webpack służy do bandlowania wszystkich plików, w tym html, i
potrafi przy tym w html wsadzić odwołania do CSS i JS, to jak to pogodzić z
PHP w tle, który ten html generuje np. z szablonu wsadzając jakieś dane?
--
pozdrawiam
Roman Tyczka
Borys Pogoreło
Jan 11, 2019, 6:46:11 AM1/11/19
to
Dnia Mon, 7 Jan 2019 21:00:15 +0100, Roman Tyczka napisał(a):
> Pytanie na śniadanie:
> - jeśli webpack służy do bandlowania wszystkich plików, w tym html, i
> potrafi przy tym w html wsadzić odwołania do CSS i JS, to jak to pogodzić z
> PHP w tle, który ten html generuje np. z szablonu wsadzając jakieś dane?
To już nie jest kwestia webpacka, tylko tego jak rozwiązujesz kwestię
> Pytanie na śniadanie:
> - jeśli webpack służy do bandlowania wszystkich plików, w tym html, i
> potrafi przy tym w html wsadzić odwołania do CSS i JS, to jak to pogodzić z
> PHP w tle, który ten html generuje np. z szablonu wsadzając jakieś dane?
widoku w swojej aplikacji. Webpack tylko połączy to, co mu podasz.
--
Borys Pogoreło
borys(#)leszno,edu,pl
Roman Tyczka
Jan 11, 2019, 7:18:07 AM1/11/19
to
wsadza tam pewne informacje, które są potrzebne po stronie browsera. Do
tego muszę pożenić webpacka.
Po zastanowieniu wymyśliłem, że będę to robił tak, że webpack będzie
przetwarzał te szablony mustache i robił w nich swoją robotę, a potem PHP
już na tych przetworzonych przez webpacka szablonach będzie operował i
generował html-e, czy to się klei?
--
pozdrawiam
Roman Tyczka
Borys Pogoreło
Jan 11, 2019, 7:38:08 AM1/11/19
to
Dnia Fri, 11 Jan 2019 13:18:06 +0100, Roman Tyczka napisał(a):
> tego muszę pożenić webpacka.
> Po zastanowieniu wymyśliłem, że będę to robił tak, że webpack będzie
> przetwarzał te szablony mustache i robił w nich swoją robotę, a potem PHP
> już na tych przetworzonych przez webpacka szablonach będzie operował i
> generował html-e, czy to się klei?
Nie, zupełnie nie. Wygląda na próbę wciśnięcia webpacka do procesu tylko
> tego muszę pożenić webpacka.
> Po zastanowieniu wymyśliłem, że będę to robił tak, że webpack będzie
> przetwarzał te szablony mustache i robił w nich swoją robotę, a potem PHP
> już na tych przetworzonych przez webpacka szablonach będzie operował i
> generował html-e, czy to się klei?
dlatego, że masz nową zabawkę i próbujesz ją wykorzystać. Zadaniem webpacka
jest tylko poskładanie zasobów w ładne paczki + dostarczenie paru ciekawych
funkcjonalności z tym związanych (tree shaking, hot module replacement,
itd.).
PHP niech zajmie się generowaniem gotowych szablonów jak to było do tej
pory albo niech dostarcza dane dla widoków. A wtedy obsługa widoku to jest
zadanie dla zupełnie innego narzędzia.
--
Borys Pogoreło
borys(#)leszno,edu,pl
Roman Tyczka
Jan 11, 2019, 8:28:31 AM1/11/19
to
On Fri, 11 Jan 2019 13:38:31 +0100, Borys Pogoreło wrote:
>> tego muszę pożenić webpacka.
>> Po zastanowieniu wymyśliłem, że będę to robił tak, że webpack będzie
>> przetwarzał te szablony mustache i robił w nich swoją robotę, a potem PHP
>> już na tych przetworzonych przez webpacka szablonach będzie operował i
>> generował html-e, czy to się klei?
>
> Nie, zupełnie nie. Wygląda na próbę wciśnięcia webpacka do procesu tylko
> dlatego, że masz nową zabawkę i próbujesz ją wykorzystać. Zadaniem webpacka
> jest tylko poskładanie zasobów w ładne paczki + dostarczenie paru ciekawych
> funkcjonalności z tym związanych (tree shaking, hot module replacement,
> itd.).
Webpacka wybrałem dlatego, że poza taskami umożliwia sporo więcej, więc
>> tego muszę pożenić webpacka.
>> Po zastanowieniu wymyśliłem, że będę to robił tak, że webpack będzie
>> przetwarzał te szablony mustache i robił w nich swoją robotę, a potem PHP
>> już na tych przetworzonych przez webpacka szablonach będzie operował i
>> generował html-e, czy to się klei?
>
> Nie, zupełnie nie. Wygląda na próbę wciśnięcia webpacka do procesu tylko
> dlatego, że masz nową zabawkę i próbujesz ją wykorzystać. Zadaniem webpacka
> jest tylko poskładanie zasobów w ładne paczki + dostarczenie paru ciekawych
> funkcjonalności z tym związanych (tree shaking, hot module replacement,
> itd.).
jeśli już czegoś się miałem uczyć to wybrałem jego, ale najważniejsze są
taski typu transpilacja, minifikacja, polyfikacja itd. Dzięki temu mogę
apkę w JS rozbić na moduły (jak w każdym normalnym języku) oraz nie kopać
się ze starymi standardami tylko pisać w ES6, co daje dużo wygody i
prostoty (relatywnie).
> PHP niech zajmie się generowaniem gotowych szablonów jak to było do tej
> pory
jak to pogodzić bez automatycznego ich includowania?
> albo niech dostarcza dane dla widoków. A wtedy obsługa widoku to jest
> zadanie dla zupełnie innego narzędzia.
MVC nie wiem jak dobrze zrobić, na razie ten obszar kuleje i nie potrafię
zrobić tego dobrze, np. nie mam bladego pojęcia jak dostarczać dane do
widoków w PHP.
--
pozdrawiam
Roman Tyczka
Borys Pogoreło
Jan 11, 2019, 11:17:11 AM1/11/19
to
Dnia Fri, 11 Jan 2019 14:28:30 +0100, Roman Tyczka napisał(a):
> Webpacka wybrałem dlatego, że poza taskami umożliwia sporo więcej, więc
> jeśli już czegoś się miałem uczyć to wybrałem jego, ale najważniejsze są
> taski typu transpilacja, minifikacja, polyfikacja itd. Dzięki temu mogę
> apkę w JS rozbić na moduły (jak w każdym normalnym języku) oraz nie kopać
> się ze starymi standardami tylko pisać w ES6, co daje dużo wygody i
> prostoty (relatywnie).
Tylko to nie jest akurat wyróżnik webpacka, to samo zrobisz gulpem, gruntem
> Webpacka wybrałem dlatego, że poza taskami umożliwia sporo więcej, więc
> jeśli już czegoś się miałem uczyć to wybrałem jego, ale najważniejsze są
> taski typu transpilacja, minifikacja, polyfikacja itd. Dzięki temu mogę
> apkę w JS rozbić na moduły (jak w każdym normalnym języku) oraz nie kopać
> się ze starymi standardami tylko pisać w ES6, co daje dużo wygody i
> prostoty (relatywnie).
czy nawet skryptami shella. Ba, nawet możesz webpacka wpiąć w proces budowy
gulpa czy grunta, jeśli wolisz proceduralnie to opisywać, a nadal korzystać
z webpacka do budowy modułów JS.
> Ok, ale jeśli w tych szablonach ma być odniesienie do plików JS czy CSS to
> jak to pogodzić bez automatycznego ich includowania?
> Nie używam żadnych frameworków, bo jeszcze jestem za chudy w uszach, nawet
> MVC nie wiem jak dobrze zrobić, na razie ten obszar kuleje i nie potrafię
> zrobić tego dobrze, np. nie mam bladego pojęcia jak dostarczać dane do
> widoków w PHP.
Bo wydaje mi się, że chcesz tu odwócić role.
--
Borys Pogoreło
borys(#)leszno,edu,pl
0 new messages