Webpacki tutvustus: mis see on ja kuidas seda kasutada

Sissejuhatus

Okei, nii et ma eeldan, et olete veebipaketist kuulnud - see on põhjus, miks te siin olete, eks? Päris küsimus on, mida sa sellest tead? Võib-olla teate selle kohta mõnda asja, näiteks kuidas see töötab, või pole teil aimugi. Mõlemal juhul võin teile kinnitada, et pärast selle artikli lugemist tunnete end kogu veebipaketi olukorras tõenäoliselt piisavalt mugavalt.

Lõppude lõpuks - vajadus on leiutamise ema ...

Ülaltoodud tsitaat on suurepärane viis öelda, miks veebipakk eksisteerib. Kuid selleks, et seda paremini mõista, peame minema tagasi tee juurde, kui JavaScripti loomine polnud uus seksikas asi, vanal ajal, mil veebisait oli vaid väike kimp vanu häid HTML-i, CSS ja tõenäoliselt üks või mõnel juhul vähe JavaScripti faile. Kuid varsti kõik see muutus.

Milles probleem oli?

Kogu dev-kogukond oli kaasatud pidevasse otsingusse, et parandada JavaScripti / veebirakenduste kasutamise ja ehitamisega kasutajate ja arendajate üldist kogemust. Seetõttu nägime palju uusi tutvustatud raamatukogusid ja raamistikke.

Aja jooksul arenesid ka mõned kujundusmustrid, et anda arendajatele parem, võimsam, kuid samas väga lihtne viis keerukate JavaScripti rakenduste kirjutamiseks. Varasemad veebisaidid polnud lihtsalt väike pakett, milles oli paaritu arv faile. Nad väitsid, et JavaScripti moodulite kasutuselevõtuga muutub mahukaks, kuna uus trend oli kapseldatud väikeste kooditükkide kirjutamine. Lõpuks viis see kõik olukorrani, kus meil oli 4x või 5x he faile üldises rakenduste paketis.

Mitte ainult rakenduse üldine suurus ei olnud väljakutse, vaid ka tohutu lõhe selles osas, mida koodiarendajad kirjutasid ja milliseid koodibrauserid said aru. Arendajad pidid kasutama palju abikoodi, mida nimetatakse polyfillsiks, et veenduda brauserite suutlikkuses nende paketides olevat koodi tõlgendada.

Nendele küsimustele vastamiseks loodi veebipakett. Webpack on staatiline moodulite komplekteerija.

Kuidas oli Webpack vastus?

Lühidalt - Webpack läbib teie paketi ja loob seda, mida ta nimetab sõltuvusgraafiks, mis koosneb erinevatest moodulitest, mida teie veebibrauser nõuaks, et ootuspäraselt toimiks. Seejärel loob see sõltuvalt sellest graafikust uue paketi, mis koosneb minimaalselt vajalikest failide arvust, sageli vaid ühest bundle.js -failist, mille saab hõlpsalt html-faili ühendada ja rakenduse jaoks kasutada.

Selle artikli järgmise osa osas tutvustame teid veebipaketi samm-sammult seadistamise kaudu. Loodan, et saate selle lõpuks aru Webpacki põhitõdedest. Saame siis selle veerema ...

Mida me ehitame?

Tõenäoliselt olete ReactJSist kuulnud. Kui teate reactJS-i, siis tõenäoliselt teate, mis on rakendus-reageerima-rakendus. Neile, kellel pole aimugi, kumb neist kahest on, on ReactJS kasutajaliidese teek, mis on intelligentsete keerukate kasutajaliideste loomisel väga kasulik, ja luua-reageerida-rakendus on CLI-tööriist katlaplaadi arendamise seadistamiseks või alglaadimiseks. Reacti rakenduste loomiseks.

Täna loome lihtsa rakenduse React, kuid kasutamata loomise-reageerimise rakenduse CLI-d. Loodetavasti kõlab see teile piisavalt lõbusalt. :)

Paigaldusfaas

npm int

Täpselt nii, see alustabki peaaegu kõigi heade asjade algust: tavaline vana npm init. Ma hakkan kasutama VS-koodi, kuid võite asjade alustamiseks kasutada mis tahes teile meeldivat koodiredaktorit.

Enne kui midagi sellist teha saate, mõelge, veenduge, et teie arvutisse oleks installitud uusim nodeJS ja npm versioon. Protsessi kohta lisateabe saamiseks klõpsake kõigil neil linkidel.

npm dollarit init

See loob stardipaketi ja lisab meile faili package.json. Siin mainitakse kõiki selle rakenduse ehitamiseks vajalikke sõltuvusi.

Nüüd vajame lihtsa React-rakenduse loomiseks kahte peamist teeki: React ja ReactDOM. Lisagem siis npm-i abil meie rakendusesse sõltuvusi.

npm dollarit ma reageerin reageerima - säästma

Järgmisena peame lisama veebipaketi, et saaksime oma rakenduse komplekteerida. Mitte ainult komplekteerimine, vaid me vajame ka kuuma uuesti laadimist, mis on võimalik veebipaketi dev-serveri abil.

$ npm i webpack webpack-dev-server webpack-cli - salvesta - dev

Salvesta - dev on täpsustada, et need moodulid on lihtsalt dev sõltuvused. Kuna me töötame Reaketiga, peame meeles pidama, et React kasutab ES6 klasse ja impordi avaldusi, mida kõik brauserid ei pruugi mõista. Veendumaks, et kood on kõikides brauserites loetav, vajame sellist tööriista nagu babel, et muuta meie kood brauserite jaoks tavapäraselt loetavaks koodiks.

$ npm ma babel-core babel-loader @ babel / preset-reageeri @ babel / preset-env html-webpack-plugin - salvesta-dev

Noh, mida ma võin öelda, see oli maksimaalne installimiste arv, mida ma luban. Babeli puhul oleme laadinud esmalt tuuma Babeli raamatukogu, seejärel laaduri ja lõpuks 2 pistikprogrammi või eelseadet, mis töötavad spetsiaalselt koos Reakti ja kõigi uute koodidega ES2015 ja ES6.

Läheme edasi, lisame mõne koodi ja alustagem veebipaki seadistamist.

Nii peaks fail pack.json hoolitsema kõigi seniste installide eest. Teil võib olla erinev versiooninumber sõltuvalt sellest, kui jälgite seda artiklit.

Kood

Alustame faili webpack.config.js lisamisega meie rakenduse struktuuri juuri. Lisage järgmine kood oma faili webpack.config.

const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
moodul.exports = {
  // See omadus määratleb rakenduse käivitamise koha
  kirje: './ src / index.js',
  // See omadus määratleb faili tee ja failinime, mida kasutatakse komplekteeritud faili juurutamiseks
  väljund: {
    tee: tee.join (__ dirname, '/ dist'),
    failinimi: 'bundle.js'
  },
  // Seadistavad laadurid
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        kasuta: {
          laadur: 'babel-loader'
        }
      }
    ]
  },
// Seadistusplugin HTML-faili kasutamiseks komplekteeritud js-failide teenimiseks
 pistikprogrammid: [
    uus HtmlWebpackPlugin ({
      mall: './src/index.html'
    })
  ]
}

Olgu, mõistame ülaltoodud jooni.

Esiteks alustame vaiketee moodulist faili asukohale juurde pääsemiseks ja faili asukohta muutmiseks.

Järgmisena nõuame HTMLWebpackPluginit HTML-faili genereerimiseks, mida kasutatakse komplekteeritud JavaScripti faili / failide esitamiseks. Lisateavet HTMLWebpackPlugini kohta klõpsake lingil klõpsates.

Siis on meil objekt export.module koos mõne omadusega. Esimene neist on kande atribuut, mida kasutatakse selleks, et täpsustada, millise faili veebipakk peaks alustama, et luua sisemine sõltuvusgraafik.

moodul.exports = {
  sisestus: './ src / index.js'
}

Järgmine on väljundi atribuut, mis täpsustab, kuhu komplekteeritud fail tuleks genereerida ja milline oleks komplekteeritud faili nimi. Seda teevad omadused output.path ja output.filename.

moodul.exports = {
// See omadus määratleb faili tee ja failinime, mida kasutatakse komplekteeritud faili juurutamiseks
  väljund: {
    tee: tee.join (__ dirname, '/ dist'),
    failinimi: 'bundle.js'
  },
}

Järgmisena on laadurid. Selle eesmärk on täpsustada, mida veebipakk konkreetse faili tüübi jaoks tegema peaks. Pidage meeles, et veebipakend saab karbist aru ainult JavaScripti ja JSON-i kasutades, kuid kui teie projektis kasutatakse mõnda muud keelt, siis on see koht, kus saate täpsustada, mida selle uue keelega teha.

moodul.exports = {
// Seadistavad laadurid
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        kasuta: {
          laadur: 'babel-loader'
        }
      }
    ]
  }
}

Teave tuleks täpsustada iga mooduli omaduse objektis, milles on lisaks rida reegleid. Igal juhul on olemas objekt. Olen ka määranud, et välistada kaustas node_modules kõik asjad.

Järgmine on pistikprogrammi atribuut. Seda kasutatakse veebipaketi võimaluste laiendamiseks. Enne kui pistikprogrammi saab kasutada mooduli ekspordiobjekti sees asuvas pistikprogrammi massiivis, peame seda nõudma.

moodul.exports = {
// Seadistusplugin HTML-faili kasutamiseks komplekteeritud js-failide teenimiseks
 pistikprogrammid: [
    uus HtmlWebpackPlugin ({
      mall: './src/index.html'
    })
  ]
}

See konkreetne plugin, nagu varem selgitatud, kasutab määratud faili meie kaustas src. Seejärel kasutab see mallina meie HTML-faili, kuhu kõik komplekteeritud failid automaatselt sisestatakse. Kasutusel on palju muid pluginaid, mida saaksime kasutada - lisateabe saamiseks kontrollige ametlikku lehte.

Viimane asi, mida peame tegema, on faili .babelrc loomine, et kasutada meie installitud babeli eelseadet ning hoolitseda ES6 klasside ja meie koodis olevate avalduste eest. Lisage .babelrc-faili järgmised koodiridad.

{
  "eelseaded": ["env", "reageeri"]
}

Ja just nii, nüüd saab babel neid preseteid kasutada. Okei, nii palju seadistusest - lisageme Reaxi koodi, et näha, kuidas see töötab.

Reaktsiooni kood

Kuna rakenduse lähtepunktiks on src-kaustas asuv fail index.js, alustame sellest. Alustuseks nõuame sellisel juhul oma kasutamiseks nii Reakti kui ka ReactDOMi. Lisage allolev kood oma faili index.js.

importida reageerida 'reageerima';
impordi ReactDOM 'react-dom'ist';
impordi rakendus kaustast. / Components/App;
ReactDOM.render (, document.getElementById ('app'));

Nii et lihtsalt impordime teie loodud komponentide kaustast uue faili ja lisame kausta App.js uue faili. Vaatame siis, mis on App.js-failis:

impordi Reakt, {komponent} rakendusest 'reageerima'
klassi rakendus laiendab komponenti {
  renderdama () {
    tagasi (
      
        

Webpack + reageerimise seadistamine

      
    )   } }
eksport vaikimisi rakendus;

Oleme peaaegu valmis. Ainus, mis nüüd järele jääb, on kuuma uuesti laadimise lubamine. See tähendab, et iga kord, kui mõni muudatus tuvastatakse, laadib brauser lehe automaatselt uuesti ning tal on võimalus kogu rakendus koguda ja komplekteerida, kui aeg kätte jõuab.

Saame seda teha skripti väärtuste lisamisega faili paketti.json. Eemaldage faili package.json skriptide objektist test atribuut ja lisage need kaks skripti:

"start": "webpack-dev-server --režiimi arendamine --open --hot",
"build": "webpack - mode mode"

Olete kõik valmis! Minge oma terminali, liikuge juurkausta ja käivitage npm start. See peaks käivitama teie arvutis serveri ja HTML-faili brauseris teenima. Kui teete väiksemaid / suuremaid muudatusi ja salvestate koodi, värskendatakse teie brauserit automaatselt, et kuvada uusim muudatuste komplekt.

Kui olete mõelnud, et olete rakenduse komplekteerimiseks valmis, peate lihtsalt vajutama käsku, npm build ja Webpack loob teie projekti kausta optimeeritud paketi, mida saab kasutada mis tahes veebiserveris.

Järeldus

See on vaid väike veebipaketi ja babeli rakenduse või kasutamise juhtum, kuid rakendused on piiramatud. Loodan, et olete piisavalt põnevil, et uurida rohkem võimalusi ja võimalusi veebipaketi ja babeli abil toimimiseks. Lisateabe saamiseks lugege nende ametlikke veebisaite ja lugege neid põhjalikult.

Olen loonud Githubi repo koos kõigi selles sisalduvate koodidega, nii et palun lisage sellele küsimusi.

Minu kaks senti veebipaketi kohta? Noh, mõnikord võite mõelda, et see pole midagi muud kui tööriist ja miks peaksite tööriista jaoks liiga palju vaeva nägema? Kuid uskuge mind, kui ütlen seda: esialgne võitlus veebipaketi ümber õppimisel aitab säästa tohutul hulgal tunde, mille muidu investeeriksite ilma veebipaketita arendamisse.

See on nüüd kõik, loodan, et saate varsti jälle ühe huvitava artikliga tutvuda. Loodetavasti on teile selle lugemine meeldinud!

Kui teil tekib mõne ülalnimetatud toimingu / protsessi järgimisel raskusi või probleeme, võtke julgesti ühendust ja jätke kommentaarid.

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: https://twitter.com/ashishnandansin