Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > pl.comp.lang.javascript > #3540 > unrolled thread

Webpack i otoczenie

Started byRoman Tyczka <noemail@because.no>
First post2018-12-23 20:37 +0100
Last post2019-01-11 17:17 +0100
Articles 10 — 3 participants

Back to article view | Back to pl.comp.lang.javascript


Contents

  Webpack i otoczenie Roman Tyczka <noemail@because.no> - 2018-12-23 20:37 +0100
    Re: Webpack i otoczenie NotBear <paulcomHATESPAM@interia.pl> - 2018-12-31 00:35 +0100
      Re: Webpack i otoczenie Roman Tyczka <noemail@because.no> - 2019-01-07 15:00 +0100
        Re: Webpack i otoczenie Borys Pogoreło <borys@pl.edu.leszno> - 2019-01-07 15:23 +0100
          Re: Webpack i otoczenie Roman Tyczka <noemail@because.no> - 2019-01-07 21:00 +0100
            Re: Webpack i otoczenie Borys Pogoreło <borys@pl.edu.leszno> - 2019-01-11 12:44 +0100
              Re: Webpack i otoczenie Roman Tyczka <noemail@because.no> - 2019-01-11 13:18 +0100
                Re: Webpack i otoczenie Borys Pogoreło <borys@pl.edu.leszno> - 2019-01-11 13:38 +0100
                  Re: Webpack i otoczenie Roman Tyczka <noemail@because.no> - 2019-01-11 14:28 +0100
                    Re: Webpack i otoczenie Borys Pogoreło <borys@pl.edu.leszno> - 2019-01-11 17:17 +0100

#3540 — Webpack i otoczenie

FromRoman Tyczka <noemail@because.no>
Date2018-12-23 20:37 +0100
SubjectWebpack i otoczenie
Message-ID<1cc7pmnro6epm$.dlg@tyczka.com>
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

[toc] | [next] | [standalone]


#3541

FromNotBear <paulcomHATESPAM@interia.pl>
Date2018-12-31 00:35 +0100
Message-ID<q0bkni$guu$1@node2.news.atman.pl>
In reply to#3540
W dniu 2018-12-23 o 20:37, Roman Tyczka pisze:
> 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

[toc] | [prev] | [next] | [standalone]


#3542

FromRoman Tyczka <noemail@because.no>
Date2019-01-07 15:00 +0100
Message-ID<cidkv12zjvz6.dlg@tyczka.com>
In reply to#3541
On Mon, 31 Dec 2018 00:35:13 +0100, NotBear wrote:

>> 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.

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. 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

[toc] | [prev] | [next] | [standalone]


#3543

FromBorys Pogoreło <borys@pl.edu.leszno>
Date2019-01-07 15:23 +0100
Message-ID<1xthl22kodiwv$.bllbphbwlvq9$.dlg@40tude.net>
In reply to#3542
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
;)

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

[toc] | [prev] | [next] | [standalone]


#3544

FromRoman Tyczka <noemail@because.no>
Date2019-01-07 21:00 +0100
Message-ID<1gnzrdot2kjlc$.dlg@tyczka.com>
In reply to#3543
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 ;-)

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

[toc] | [prev] | [next] | [standalone]


#3547

FromBorys Pogoreło <borys@pl.edu.leszno>
Date2019-01-11 12:44 +0100
Message-ID<iw27wensewsn.t4l2atqal849$.dlg@40tude.net>
In reply to#3544
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ę
widoku w swojej aplikacji. Webpack tylko połączy to, co mu podasz.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

[toc] | [prev] | [next] | [standalone]


#3550

FromRoman Tyczka <noemail@because.no>
Date2019-01-11 13:18 +0100
Message-ID<11ha0zu6retqx$.dlg@tyczka.com>
In reply to#3547
On Fri, 11 Jan 2019 12:44:10 +0100, Borys Pogoreło wrote:

> 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ę
> widoku w swojej aplikacji. Webpack tylko połączy to, co mu podasz.

W PHP mam pliki szablonów html, które przetwarzam za pomocą Mustache. PHP
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

[toc] | [prev] | [next] | [standalone]


#3552

FromBorys Pogoreło <borys@pl.edu.leszno>
Date2019-01-11 13:38 +0100
Message-ID<v8jodd04ewwi.elsdq4m09jpt$.dlg@40tude.net>
In reply to#3550
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
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

[toc] | [prev] | [next] | [standalone]


#3554

FromRoman Tyczka <noemail@because.no>
Date2019-01-11 14:28 +0100
Message-ID<1nex4z0wucam0$.dlg@tyczka.com>
In reply to#3552
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
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 

Ok, ale jeśli w tych szablonach ma być odniesienie do plików JS czy CSS to
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.

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.

-- 
pozdrawiam
Roman Tyczka

[toc] | [prev] | [next] | [standalone]


#3556

FromBorys Pogoreło <borys@pl.edu.leszno>
Date2019-01-11 17:17 +0100
Message-ID<1qgfdvxxbqi3z$.42o6u2ygyz66.dlg@40tude.net>
In reply to#3554
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
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 bardzo rozumiem problem - ścieżki do plików chyba znasz?

> 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.

PHP niech się zajmie dostarczaniem danych albo generowaniem całych widoków.
Bo wydaje mi się, że chcesz tu odwócić role.

-- 
Borys Pogoreło
borys(#)leszno,edu,pl

[toc] | [prev] | [standalone]


Back to top | Article view | pl.comp.lang.javascript


csiph-web