Õppige Webpackit näite järgi: hägused kohahoidja pildid

Mobiil. Pilt Rodion Kutsaevilt saidil Unsplash.

Selle postitusega kaasnev repos kasutatakse veebipaketti 3. Kui olete huvitatud veebipaketi 4 õppimisest, on see postitus kasulik, kuna mõisted ja konfiguratsioonifaili vorming on samad. Webpack 4 tutvustas nii optimeerimisi, nullkonfiguratsiooni võimalusi kui ka uusi väljas olevaid pistikprogramme, millest kogenud kasutaja tahaks teada, kuid mis on selle postituse eesmärgist väljas.

See on episoodiline juhend mitmesuguste näidete abil veebipaketi õppimiseks. Veebipaketi algajad on teretulnud. Olen üks ise ja püüan selgitada veebipaketi asju terminitega, mis on mõistlikud kellelegi lihtsalt tööriista tundma õppimisel.

Kõik inimesed, kes selles juhendis kasutatavaid pakette hooldavad, väärivad tunnustust selliste vingete tööriistade kogukonnale kättesaadavaks tegemise eest. Kuna see on selle juhendi teema, läheb spetsiaalne hüüatus reageerivale laadijale ja projekti ülalpidavale Jeremy Stuckile.

I osas vaatleme piltide laadimise tehnikat. See hõlmab 1) meie piltide häguseid kohahoidja versioone, mis on lisatud lehe alglaadimisel. Seejärel 2) taotleb serverilt kõiki pilte. Ja lõpuks: 3) kui täispildid lõpuks laaditakse, muutuvad nad tuhmiks ja hägused kohahoidjad eemaldatakse.

Hägused kohahoidja pildid.

See tehnika sobib suurepäraselt aeglase ühendusega seadmetele. See annab kasutajatele aimu, kuidas leht mitme sekundi jooksul välja näeb (mõelge aeglasele 3G-le), mis võib kuluda lehe piltide täielikuks laadimiseks.

Alustamine

Kui soovite oma koodiredaktoris jälgida, võite selle repo alla laadida või selle klooni alla laadida ja soovi korral kontrollida repo hägususe haru.

Allpool on failistruktuur, mille peaksite leidma projekti kausta avamisel.

Kasutame veebipaketti ja spetsiaalselt reageerivat laadijat. Suurendame suurust ja genereerime src / imgs-i kolme pildi hägused kohahoidjad. Need on muide, autori kõigi aegade lemmikmängu tegelased.

Vaatame nüüd meie lähtekoodi, mis algab indeksist.html. Mööda minnes näeme, mida veebipakett meie heaks teeb, ja teeme pausi, et rääkida sellest, kuidas. Katlaplaat on lühiduse huvides ära jäetud ja asendatud numbriga <- ... ->.

Olete ilmselt märganud, et seal on kolm elementi, üks iga meie pildi jaoks. Mis saab malli litritest? Ja milles on vaja toimimist? Nii palume veebipakil teha oma asi.

Kui veebipakk parsib meie HTML-i kaudu, kohtub see malli litritega ja teab, et seal on vaja midagi sinna panna. Nõudefunktsioon ütleb veebipakil, mida sinna panna - meie puhul sisestame pildiandmeid (võib-olla pole veel selge, milliseid andmeid me sinna paneme, kuid jääme koos minuga sinna, kuhu jõuame). Niisiis, kuidas teab veebipakett seda teha? Kas see on automaatne?

Kui te pole kunagi varem veebipaketi konfiguratsioonifaili näinud, võiksite arvata sellele lihtsalt pilku heites, et see pole suuresti automaatne. Seal on palju võimalusi, millest mõned on spetsiifilised veebipaketi jaoks ja muud, mis on konkreetsed teatud laadurile või pistikprogrammile. Mis on laadur ikkagi? Mis on pistikprogramm?

Kiired määratlused

Enne konfiguratsiooni sukeldumist pakun nende veebipaketi mõistete kiireid määratlusi. Lisan ka linke dokumentide juurde, mis neid täpsemalt selgitavad.

HTML-i töötlemine

Vaatame nüüd, kuidas kasutame HTML-i spetsiifiliseks käsitlemiseks laadureid ja pistikprogramme. Allpool on meie veebipack.config.js osad, mis on seotud HTML-iga. Muud valikud, millest lõpuks räägime, jäetakse ära ja asendatakse // ....

Esiteks tõmbame sisse html-webpack-plugina ja määrame selle muutujale nimega HtmlWebpackPlugin (loominguline, eks?). Selle pistikprogrammi ülesanne on genereerida HTML-fail, mida me levitamisel kasutame. Pistikprogrammi käivitamiseks kasutame oma muutujal uut operaatorit, mis asub meie konfiguratsiooniobjekti atribuutides pluginad. Sellele konfiguratsiooniobjektile, millele ma viitan, on määratud moodul.exports ja just see "ütleb" veebipaketile, mida teha.

html-webpack-plugin genereerib üsna üldise katlakivi HTML-i ilma sisse lülitatud võimalusteta. Kuid pange tähele, et oleme selle malli omaduse võrdsustanud meie lähtefailiga index.html. Nagu arvata võis, käsib see pistikprogrammil kasutada meie HTML.faili genereerimisel mallina meie index.html. Tore, aga miks kõik need probleemid läbi küsida, mida te küsite?

Põhjus on see, et tahame lähteteksti HTML-i teisendamiseks kasutada laadureid. Tahame seda muuta:

sellesse:

Pange tähele, et malli litreid ja vajavad funktsioone on asendatud. Nüüd on atribuudil a.href URL meie pildi muudetud suurusega versioonile (300 pikslit). Ka atribuudil img.src on nüüd pildisiseseid andmeid. Näitasin meie HTML-i teisendamist ühe elemendi jaoks, kuid just seda me tahame, et kõik elemendid välja näeksid.

Vaatame, kuidas me kasutame laadimist selle ümberkujundamise jaoks. Suurendame meie veebipack.config.js koodiplokki, mis algab testiga: /\.html$/ võtme-väärtuse paar.

{
  test: /\.html$/,
  kasuta: {
    laadur: 'html-loader',
    valikud: {
     interpoleerima: tõsi
    }
  }
}

See blokk ütleb: "Tere, veebipakett, kui ilmute HTML-faile, kasutage html-laadijat ja veenduge, et selle seadistamine võimaldaks interpoleerimist".

Teisisõnu, katsetame laiendit .html. Seda tüüpi failide laadijana kasutame html-laadijat ja seejärel täpsustame valikutes, mida sooviksime kasutada html-loaderist interpoleerimise funktsioonina.

Kui vaatate html-laaduri dokumentatsiooni, näete, et kui interpoleerimine on seatud väärtusele True, saate manustada mõne JavaScripti (JS) tulemuse otse meie HTML-i. Meie puhul kasutame seda ära, kutsudes funktsiooni Nõuda, et käskida veebipakil pildivarad tuua. Kuid kuidas teab webpack, mida piltidega teha?

Pildi töötlemine

Peame ütlema, milliseid laadureid ja pistikprogramme kasutada. Allpool on osa meie failist webpack.config.js, mis juhendab veebipaketti, mida teha piltidega.

Meie kasutataval imagemin-webpack-pistikprogrammil on üsna lihtne töö - see lihtsalt tihendab meie pilte. Selle kohta saate rohkem lugeda siit, kuid huvitavam on laadur, mida kasutame oma piltide teisendamiseks. Vaadake testiga algavat koodiplokki: /\.(png|jpg|gif)$/ võtme-väärtuse paar.

See blokk ütleb: “Tere, veebipakk, kui kasutate pildifaile, kasutage responsive-loaderit. Genereerige pildi suuruse versioon kiirusega 300 pikslit. Ja kui olete selle juures, looge andmeid 50 piksli laiuse kohahoidja pildi jaoks ”.

Teisisõnu, kontrollime laiendite „.png” või „.jpg” või „.gif” olemasolu. Seda tüüpi failide laadijana kasutame responsive-loaderit. Seejärel täpsustame valikutes, mida tahaksime oma piltide teisendamiseks kasutada responsive-laaduri suuruse, kohahoidja ja nimefunktsioonidel.

Vaatame üksikasjalikult, mida tundlik laadur meie jaoks nende võimalustega teeb. Kui me ütleme:

nõuda ('./ imgs / cloud-strife.jpg');

Siis annab tundlik laadur meile selle tagasi:

See on lihtsalt JS-i objekt. Ja sellepärast, millal saavad .src ja .placeholder kasutada juurdepääsu oma vajadustele, nõuame avaldusi, nii et kui me seda teeme:

webpack annab meile selle:


Kiire kokkuvõte

Vinge, nii et meil on HTML-i ja piltide töötlemiseks töövoog. Korda:

HTML-i jaoks kasutame HTML-faili genereerimiseks html-webpack-pluginat, kasutades mallina lähteteksti index.html. Me kasutame HTML-i laadimist HTML-i töötlemiseks ja spetsiaalselt interpoleerimise lubamiseks. Interpoleerimine võimaldab meil HTML-is kasutada nõutud avaldusi, et saaksime paluda veebipaketil teatud viisil pilte laadida.

Piltide jaoks kasutame oma piltide suuruse muutvate versioonide genereerimiseks responsive-loaderit. Seejärel genereerib see kujutise andmed häguste kohahoidjate versioonide jaoks, et saaksime neid tekstisiseseks kasutamiseks kasutada.

Kui meie kood on nende laaduritega muudetud, manustatakse pilditeed ja pildiandmed meie HTML-i. Tore!

Allikas järkjärgulised stiililehed (CSS) ja JavaScript (JS)

Vaatame üle meie ülejäänud lähtekoodi. Vaadake koodikommentaarides selgitusi selle kohta, kuidas me kasutame JS-i ja CSS-i täisekraadi kadumiseks ja kohatäite pildi eemaldamiseks.

CSS:

JS:

CSS ja JS laadimine

Allpool on meie index.js väljanägemine. Selles failis öeldakse veebipaketile, et ta tooks sisse kõik moodulid, mida soovime kasutada, ja seejärel kasutaks neid. Kõige lihtsamalt öeldes on moodul lihtsalt tükk koodist teisest failist, mida soovime importida ja kasutada.

JS-faili sees saame moodulite sissetoomise asemel kasutada ES2015 impordi süntaksit. Näiteks pange tähele, et import loadFullImages kataloogist './loadImages' toimib samamoodi nagu const loadFullImages = nõuda ('./ loadImages).

Meie puhul on meil lihtsalt kaks moodulit. Pange tähele, et veebipaketi moodulid ei ole piiratud JS-iga - ka CSS-faile saab moodulitena käsitleda, kui kasutame õigeid laadureid. See on võimas, kuid võib alguses segadusse ajada. Kui vaatan teid, kuidas veebipakett meie CSS-faili laadib, näete siiski, et kõik, mida me teeme, on meie lähteteksti CSS-i minimeerimine ja faili main.css genereerimine:

Ülaltoodud valikuplokis pange tähele, et saame määratleda kasutusomaduses mitu laadurit, laadides laaduriobjektide massiivi. Seejärel töödeldakse faili iga laaduri poolt, alustades massiivi viimasest laadijast ja lõpetades seejärel esimesega.

Selles blokis öeldakse põhimõtteliselt: „Tere, veebipakk, kui ilmute CSS-faile, kasutage CSS-i toomiseks ja minimeerimiseks css-loaderit. Seejärel kasutage ekstraktilaadurit, et eraldada see meie JS-ist (selle kohta lähemalt siin). Seejärel kasutage faililaadijat, et luua meile fail koos algse lähtefaili nime ja laiendiga (meie juhul nimetab see faili “main.css”).

Nii ütleme veebipaketil meie JS-i laadimiseks:

See plokk ütleb põhimõtteliselt järgmist: “Hei webpack, kui ilmnevad JS-failid, kasutage meie JS-i koostamiseks babel-loaderit ja selle env-eelseadet. Babel võtab meie lähteteksti JS, mis on kirjutatud ES2015 + süntaksis, ja koondab selle brauserisõbralikuks ES5. Moodulid: vale variant lubab Babelil mitte muretseda meie impordi süntaksi muutmise pärast. Webpack juba teeb seda.

Ehitamine

Kui soovite, et veebipakk genereeriks levitamisfailid, siis minge edasi ja installige Node.js, mis on kaasas npm, kui teil pole neid veel installitud. Avage käsureali konsool ja CD projekti kataloogis. Kui kasutate Windowsi ja vajate * NIX-i sõbralikku kesta, kasutage vaikekäskluse asemel Windows Powershelli.

Kui olete projekti kataloogis, käivitage käsk npm install, et installida kõik paketid, millest me selles juhendis rääkisime. Seejärel käivitage ehitamine käsuga npm start. Allpool on toodud viimane osa veebipaketi konfiguratsioonist, mida peame veel üle vaatama. Nii teab webpack, kuhu levitamisfaile saata:

tee on utiliit. See võimaldab meil hõlpsalt konstrueerida platvormisõbralikud failide ja kataloogide teed. Need toimivad olenemata sellest, kas teie platvormi failisüsteem kasutab teeeraldusena '/' või '\'. Siin kasutame funktsiooni path.join, et öelda veebipaketile, kust meie faile leida ja saata.

sisestus ütleb webpackile, milline moodul on „peamine” moodul, millesse impordime kõik muud moodulid, millest me sõltume. Rakendus on nimi, mille oleme andnud põhikomplektile, mille veebipakk kõigi meie moodulite õmblemisega loob.

Lõpuks annab output.path veebipaketile teada, kuhu saata kõik failid, mille see meile loob. Failinimi output.filename annab veebipaketile teada, millist nimetamisskeemi selle loodud kimpude jaoks kasutada. Meie puhul loome lihtsalt ühe kimbu ja see ilmub nimega “app.bundle.js”.

Järeldus

Loodetavasti saite selle näite kaudu natuke rohkem teada selle kohta, kuidas veebipakett aitab teil kraami ehitada. Samuti loodan, et võtsite selle lugemise pealt midagi ära. Näiteks piltide laadimise tehnika, moodul JS-i kirjutamise viis või isegi kellegi teise koodi lugemine. Lõpuks loodan, et suutsite saadud koodi brauseris käivitada ja näete seda toimimas. Täname, et lugesite!

Plaksutage, kui see aitas teil midagi õppida, kommenteerige allpool olevaid küsimusi ja öelge tere mulle ja tänu Jeremy Stuckile Twitteris.