Webpack

[bozoou]

Pozdrav,

zanima me kako se sa webpack-om podesi sljedeće:

1. Ukoliko postoji neka "typing" greška u codu koja se ne može parsirati u ispravan javascript code, onda webpack u consoli vrisne grešku kod parsiranja. No ako ja imam uključenu watch opciju, vrlo vjerovatno tu grešku neću vidjeti nego ću refreshati browser i proučavati web misleći da je to zadnja istipkana verzija. Tek nakon što posumnjam u to, provjerim consolu i shvaćam da sam imao grešku...te da sam u browseru gledao zadnju uspješnu kompajliranu verziju. To zna biti malo naporno kada te tako zezne splet okolnosti da buljiš u browser zavaravajući se koju verziju gledaš.
Može li se ikako napraviti da kod greške kompilacije se ispis te greške prenese do browsera, tako da se tamo odmah može uočiti da je došlo do greške?

2. webpack kod kompilacije slaže bundle.js ...kako se može podesiti da taj bundle u svakom nastanku dobije version tag tipa "bundle.js?v=1248584" , kako bi browser bio forsiran da učitava uvijek svježu bundle verziju?

Hvala.

[kaneshiro]

bozoou kaže:

Pozdrav,

zanima me kako se sa webpack-om podesi sljedeće:

1. Ukoliko postoji neka "typing" greška u codu koja se ne može parsirati u ispravan javascript code, onda webpack u consoli vrisne grešku kod parsiranja. No ako ja imam uključenu watch opciju, vrlo vjerovatno tu grešku neću vidjeti nego ću refreshati browser i proučavati web misleći da je to zadnja istipkana verzija. Tek nakon što posumnjam u to, provjerim consolu i shvaćam da sam imao grešku...te da sam u browseru gledao zadnju uspješnu kompajliranu verziju. To zna biti malo naporno kada te tako zezne splet okolnosti da buljiš u browser zavaravajući se koju verziju gledaš.
Može li se ikako napraviti da kod greške kompilacije se ispis te greške prenese do browsera, tako da se tamo odmah može uočiti da je došlo do greške?

Ne znam, ali mozda pomogne https://github.com/webpack/webpack-d...ver/issues/522

bozoou kaže:

2. webpack kod kompilacije slaže bundle.js ...kako se može podesiti da taj bundle u svakom nastanku dobije version tag tipa "bundle.js?v=1248584" , kako bi browser bio forsiran da učitava uvijek svježu bundle verziju?

Ukljucis da ime sadrzi i hash, a hash je uvijek drugaciji ako je sadrzaj drugaciji.
https://webpack.github.io/docs/long-term-caching.html

[i_meni_dosadno]

etag je nešt što server automatski radi.
tak da ak imaš problema s zastarjelim fajlovima, pogledaj dal ti to radi

osobno mi ti načini "javaskript-34576236451243751258751248751243wfejhvbf.js" idu na kurac, makar vidim da su standard

bozoou kaže:

1. Ukoliko postoji neka "typing" greška u codu koja se ne može parsirati u ispravan javascript code, onda webpack u consoli vrisne grešku kod parsiranja. No ako ja imam uključenu watch opciju, vrlo vjerovatno tu grešku neću vidjeti nego ću refreshati browser i proučavati web misleći da je to zadnja istipkana verzija. Tek nakon što posumnjam u to, provjerim consolu i shvaćam da sam imao grešku...te da sam u browseru gledao zadnju uspješnu kompajliranu verziju. To zna biti malo naporno kada te tako zezne splet okolnosti da buljiš u browser zavaravajući se koju verziju gledaš.
Može li se ikako napraviti da kod greške kompilacije se ispis te greške prenese do browsera, tako da se tamo odmah može uočiti da je došlo do greške?

a kak taj webshitpaker uopče koristiš ?
jel komandna linija ? ak je onda imaš hrpu načina za riješit taj tvoj problem (pogledaj exit status)


a nema javaškript linter ?
jedan gugl kasnije i sazno ja da ima.
dva gugla kasnije i zgleda ima i alata za statičnu analizu.
ak se tolko tim baviš da ti treba ogroman program za pakiranje sveg tog, onda si pogleč alate za analizu koda i automatiziraj sve to

[bozoou]

@kaneshiro, hvala na odgovoru.

@i_meni_dosadno, hvala također i vidi se po pisanju da ti je dosadno

[bozoou]

Još malo pitanja.

Kako s webpackom napraviti import develop funkcija koje bi koristili smao u dev modu?

Neka svaka moja skripta koristi recimo jednu funkciju

PHP Code:

"myDevFunkc()" 


, koju koristim samo u razvojnoj okolini. Prema ovome što trenutno znam, trebao bi u svakoj komponenti (skripti) pozivati :

PHP Code:

import {myDevFunkc} from 'myDevScripts' 


…problem nastaje što onda ne mogu jednostavno switchati iz dev u production mode. Morao bi ići u svaku komponentu i obrisati/zakomentirati taj import statement …što ne zvuči baš kao ispravan način.

Kako je najbolje to rješiti?

Ovdje https://vuejs.org/v2/guide/installation.html mi je zapela za oko sljedeća rečenica:

“Replacing process.env.NODE_ENV with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.”

…nisam siguran o čemu se baš radi, pa ako me netko može uputiti gdje saznati više o tom.
Čini mi se super ako postoji način da se parcijalno tagiraju djelovi codea koji bi bili dropani prilikom minimiziranja. To mi možda odgovara i na prvo pitanje …mada mislim da bi trebao biti drugačiji pristup kada se veći komadi funkcionalnosti žele uključiti/isključiti ovisno od verzije dev/prod.

Hvala.

[bozoou]

Ovo gore pitanje slobodno zanemarite, krenuo sam detaljno češljati dokumentaciju i vidim da će biti materijala za naučiti ... a vjerovatno ni nema kratkog odgovora xd.

Nego, zapeo sam na nekoj sitnici. Krenuo sam s novim fresh webpack projectom da sve testiram uzduž i popreko i započetak sam htio instalirati globalno stvari koje se koriste na svim projektima. Jer mi nema smisla da projekti lokalno budu teški skoro do gigu zbog developmenta. (A tako je zadnji završio, ujedno moje prvo korištenje webpacka)

..i sada sam ja instalirao globalno css loadere

PHP Code:

`npm install --global style-loader css-loader` 


...no stvar ne želi šljakati tako. Vrisne mi grešku:

> Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\bozidar.DESKTOP-F6J3TPV\source\repos\testWebpack'

U čemu je trik?

Sve mi izgleda identično kao u tutorijalu / dokumentaciji : https://webpack.js.org/guides/asset-management/ , osim što sam css loadere instalirao globalno?