Alustamine Webpackiga [With Project Project]

Veebipakk on mooduli pakett mis lihtsustab keeruliste JavaScript-rakenduste loomist. See on saavutanud tõsise veojõu, kuna React'i kogukond valis selle peamise ehitustööriistana. Veebipakk on ei pakendihaldur ega ülesannete jooksja kuna see kasutab teistsugust (rohkem arenenud) lähenemist, kuid selle eesmärk on ka luua dünaamiline ehitamise protsess.

Veebipakett töötab vanilli JavaScriptiga. Võite seda kasutada siduda rakenduse staatilised varad, nagu pildid, fondid, stiililehed, skriptid ühte faili kõigi sõltuvuste eest hoolitsemine.

Te ei vaja veebipakki, et luua lihtne rakendus või veebisait, näiteks selline, millel on ainult üks JavaScript ja üks CSS-fail ja mõned pildid, kuid see võib olla elu päästja keerukam rakendamine, millel on mitu vara ja sõltuvust.

Veebipakk vs ülesannete jooksjad vs Browserify

Niisiis, kuidas veebipakk virnastab võrreldes teiste ehitustööriistadega näiteks Grunt, Gulp või Browserify?

Grunt ja Gulp on ülesannete jooksjad. Oma konfigureerimisfailis täpsustage ülesanded, ja ülesande jooksja täidab neid. The tööriista tööprotsess põhimõtteliselt näeb välja selline:

Kuid veebipakk on a mooduli pakett mis analüüsib kogu projekti, loob sõltuvuspuu, ja loob ühendatud JavaScripti faili brauserile.

Browserify on lähemal Webpackile kui ülesannete jooksjad loob sõltuvuse graafiku kuid seda tehakse ainult JavaScript-moodulite jaoks. Veebipakett läheb sammu võrra kaugemale ja see ei kata ainult lähtekoodi vaid ka muud varad nagu pildid, stiililehed, fondid jne.

Kui soovite rohkem teada kuidas Webpack võrdleb teisi ehitustööriistu, Soovitan teile kaks artiklit:

1. Andrew Ray Veebipakett: millal kasutada ja miks oma blogis
2. Cory House'i Browserify vs Webpack freeCodeCampis (suurepäraste illustratsioonidega)

Ülaltoodud kaks illustratsiooni pärinevad Pro Reacti käsiraamatu veebipaketi materjalid, teine ​​ressurss, mida tasub vaadata.

Neli põhipaketti Webpack

Webpackil on neli peamist seadistusvõimalust “põhimõisted” et peate arendusprotsessis määratlema:

1. Sissepääs - the alguspunkt sõltuvusgraafikust (üks või mitu JavaScript-faili).
2. Väljund - faili, kuhu soovite väljund, mis tuleb komplekteerida (üks JavaScript-fail).
3. Laadurid - varade ümberkujundamine muuta need Webpack mooduliteks et nad saaksid olla lisatud sõltuvusgraafikule. Näiteks, css-loader kasutatakse CSS-failide importimiseks.
4. Pluginad - kohandatud toimingud ja funktsioonid komplekti. Näiteks i18n-webpack-plugin kinnitab lokaliseerimise kimbusse.

Laadurid töötavad faili kohta enne koostamist. Pluginad täidetakse komplekteeritud koodis, koostamise protsessi lõpus.

Installige veebipakett

Et installige Webpack, avage käsurida, liikuge oma projekti kausta ja käivitage järgmine käsk:

 npm init 

Kui te ei soovi konfigureerimist ise teha, saate teha npm asustada package.json vaikeväärtustega fail järgmise käsuga:

 npm init -y 

Seejärel installige Webpack:

 npm installige veebipakett --save-dev 

Kui olete vaikeväärtusi kasutanud, on see nii, kuidas teie package.json fail peaks nägema praegu (omadused võivad olla erinevas järjekorras):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "sõltuvused": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skriptid ": " test ":" kaja "Viga: testis määratud ei ole" && exit 1 "," märksõnad ": []," autor ":" "," litsents ":" ISC " 

Looge konfiguratsioonifail

Peate looma a webpack.config.js faili projekti juurkataloogis. Sellel konfiguratsioonifailil on keskne roll, sest see on koht, kus te seda teete määratleda neli põhikontseptsiooni (sisenemispunktid, väljund, laadurid, pluginad).

The webpack.config.js faili omab konfiguratsiooniobjekti sellest omadused, mida peate täpsustama. Selles artiklis täpsustame need neli omadust vastavad neljale põhikontseptsioonile (sisenemist, väljund, moodul, ja sisse panema), kuid konfigureerimisobjektil on ka muud omadused.

1. Loo sisestuspunkt (id)

Sa võid saada üks või mitu sisenemispunkti. Peate need määrama sisenemist vara.

Sisesta järgmine koodilõik webpack.config.js faili. See määrab ühe sisestuskoha:

 module.exports = entry: "./src/script.js"; 

Rohkem kui ühe sisestuskoha määramine kas massiivi või objekti süntaksit.

Oma projekti kaustas, luua uus src kausta ja a script.js faili sees. See on sinu sisenemispunkt. Testimise eesmärgil asetage string sees. Ma kasutasin järgmist (aga võite kasutada ka huvitavamat):

 const greeting = "Tere. Ma olen veebipaketi stardiprojekt."; document.write (tervitus); 

2. Määrake väljund

Sa võid saada ainult üks väljundfail. Veebipakett koondab kõik sellesse faili. Sa pead konfigureerima väljund vara:

 const path = vaja ("tee"); module.exports = entry: "./src/script.js", väljund: failinimi: "bundle.js", tee: path.resolve (__ dirname, 'dist'); 

The faili nimi vara määratleb komplekteeritud faili nimi, samal ajal kui tee vara määrab kataloogi nime. Ülaltoodud näide loob /dist/bundle.js faili.

Kuigi see ei ole kohustuslik, on parem kasuta path.resolve () meetod kui määrate tee vara tagab mooduli täpse eraldusvõime (väljundi absoluutne rada luuakse erinevate reeglite kohaselt erinevates keskkondades, mooduli resolutsioon lahendab selle lahknevuse). Kui kasutate path.resolve, sa pead nõuda the tee Mooduli moodul üleval webpack.config.js faili.

3. Lisage laadurid

Et lisage laadurid, peate määratlema moodul vara. Allpool lisame babel-laadur mis võimaldab teil kasutage turvaliselt ECMAScript 6 funktsioone oma JS-failides:

 const path = vaja ("tee"); module.exports = entry: "./src/script.js", väljund: failinimi: "bundle.js", tee: path.resolve (__ dirname, 'dist'), moodul: rules: [test : /\.js$/, välja arvatud: / (node_modules | bower_components) /, kasuta: loader: "babel-loader", valikud: presets: ["env"]]; 

Konfiguratsioon võib tunduda keeruline, kuid see on lihtsalt kopeeritud Babeli laaduri dokumentatsioon. Enamik laadureid on varustatud kas lugemisfaili või mingi dokumendiga, nii et saate (peaaegu) alati teada, kuidas neid õigesti konfigureerida. Ja ka veebipaketi dokumentidel on lehekülg, mis selgitab kuidas seadistada module.rules.

Saate lisada nii palju laadureid kui vajate, siin on täielik nimekiri. Pange tähele, et peate ka paigaldage iga laadur npm-ga nende töötamiseks. Babeli laaduri jaoks peate installima vajalikud noodipaketid npm-ga:

 npm paigaldamine - save-dev babel-loader babel-core babel-preset-env webpack 

Kui te vaatate oma package.json näete, et npm kolmele Babeli paketile devDependencies vara, need hoolitsevad ES6 koostamise eest.

4. Lisage pluginad

Et lisage pluginad, peate täpsustama pluginad vara. Lisaks peate ka nõuda pluginad ükshaaval, kuna need on välised moodulid.

Meie näites lisame kaks veebipaki pluginat: HTML Webpack plugin ja Eelsalvesta veebipaki plugin. Veebipaketil on a kena plugin ökosüsteem, siin saab sirvida kogu nimekirja.

Nõuab pluginate kasutamist sõlme moodulitena, luua kaks uut konstanti: HtmlWebpackPlugin ja PreloadWebpackPlugin ja kasuta nõuda () funktsiooni.

 const path = vaja ("tee"); const HtmlWebpackPlugin = vaja ("html-webpack-plugin"); const PreloadWebpackPlugin = vaja ("eelsalvestamine-webpack-plugin"); module.exports = entry: "./src/script.js", väljund: failinimi: "bundle.js", tee: path.resolve (__ dirname, 'dist'), moodul: rules: [test : /\.js$/, välja arvatud: / (node_modules | bower_components) /, kasuta: loader: "babel-loader", valikud: presets: ["env"]], pluginad: [uus HtmlWebpackPlugin () uus PreloadWebpackPlugin ()]; 

Nagu ka laadurite puhul, peate ka seda tegema installige veebipaketi pluginad npm-ga. Kahe plugina installimiseks näites, käivitage järgmised käsud käsureal:

 npm installige html-webpack-plugin --save-dev npm installimine --save-dev preload-webpack-plugin 

Kui kontrollite oma package.json fail nüüd, näete, et npm lisasid kaks pluginat devDependencies vara.

Käivita veebipakett

Et luua sõltuvuspuu ja väljastage kimp, käivitage käsureal järgmine käsk:

 veebipakett 

Tavaliselt kestab üks või kaks minutit veebipakki projekti ehitamiseks. Kui olete lõpetanud, näete teie CLI-s sarnast sõnumit:

Kui kõik läks paremale Webpack loodud a dist kausta teie projekti juurest ja paigutasid kaks komplekteeritud faili (bundle.js ja index.html) sees.

Github repo

Kui soovite kogu projekti läbi vaadata, alla laadida või haarata, siis vaadake meie Github repot.