Početak rada s web-paketom [s primjerom projekta]

Webpack je modul za povezivanje modula koji olakšava izgradnju složenih JavaScript aplikacija. Postigao je ozbiljan trag budući da ga je zajednica React odabrala kao svoj glavni alat za izgradnju. Webpack je niti upravitelj paketa niti voditelj zadataka budući da koristi drugačiji (napredniji) pristup, ali i njegov cilj postaviti dinamički proces izrade.

Webpack radi s JavaScriptom s vanilijom. Možete ga upotrijebiti snop statičke imovine aplikacije, kao što su slike, fontovi, stilovi, skripte u jednu datoteku voditi brigu o svim ovisnostima.

Za izradu jednostavne aplikacije ili web-lokacije nećete trebati Webpack, na primjer onaj koji ima samo jedan JavaScript i jednu CSS datoteku i nekoliko slika, no može biti spas za život složenija aplikacija s nekoliko sredstava i ovisnosti.

Webpack vs. task runners vs. Browserify

Dakle, kako se Webpack slaže u usporedbi s drugim alatima za gradnju kao što su Grunt, Gulp ili Browserify?

Grunt i Gulp su trkači zadataka. U njihovoj konfiguracijskoj datoteci, vi odredite zadatke, i trkač zadataka ih izvršava. tijek radnog zadatka u osnovi izgleda ovako:

Međutim, Webpack je modul za povezivanje modula koji analizira cijeli projekt, postavlja stablo ovisnosti, i stvara skupnu JavaScript datoteku koji služi pregledniku.

Browserify je bliži Webpack nego zadatak trkača, kao što je također stvara graf ovisnosti ali to čini samo za module JavaScript. Webpack ide korak dalje i ne sjedinjuje samo izvorni kod i druge imovine kao što su slike, stilovi, fontovi itd.

Ako želite znati više o tome kako se Webpack uspoređuje s drugim alatima za gradnju, Preporučujem vam dva članka:

1. Andrew Ray Webpack: Kada koristiti i zašto na svom blogu
2. Cory House Browserify vs Webpack na freeCodeCamp (s odličnim ilustracijama)

Gornje dvije ilustracije su iz Webpack materijali iz Priručnika Pro React, još jedan resurs koji vrijedi pogledati.

Četiri temeljna koncepta Webpack-a

Webpack ima nazivaju se četiri glavne opcije konfiguracije “temeljni koncepti” koje ćete morati definirati u procesu razvoja:

1. ulaz - Polazna točka grafikona ovisnosti (jedna ili više JavaScript datoteka).
2. Izlaz - datoteku gdje želite izlaz će biti u paketu (jedna JavaScript datoteka).
3. Utovarivači - transformacije imovine pretvoriti ih u Webpack module tako da mogu biti dodan u graf ovisnosti. Na primjer, CSS-utovarivač se koristi za uvoz CSS datoteka.
4. Dodaci - prilagođene radnje i funkcionalnosti na snopu. Na primjer, i18n-webpack-dodatak ugrađuje lokalizaciju u snop.

Utovarivači rade po datoteci prije kompilacije. Dodaci se izvršavaju na paketu koda, na kraju postupka kompilacije.

Instalirajte Webpack

Do instalirajte Webpack, otvorite naredbeni redak, idite do mape projekta i pokrenite sljedeću naredbu:

 npm init 

Ako ne želite sami napraviti konfiguraciju, možete napraviti npm popunite package.json datoteku sa zadanim vrijednostima sa sljedećom naredbom:

 npm init -y 

Zatim instalirajte Webpack:

 npm install webpack --save-dev 

Ako ste upotrijebili zadane vrijednosti, ovako će se pojaviti vaš package.json datoteka bi trebala izgledati sada (svojstva mogu biti drugačijim redoslijedom):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skripte ": " test ":" echo "Pogreška: nije naveden test" && exit 1 "," ključne riječi " ": []," author ":" "," licenca ":" ISC " 

Stvorite konfiguracijsku datoteku

Morate stvoriti webpack.config.js datoteka u korijenskoj mapi projekta. Ova konfiguracijska datoteka ima središnju ulogu, jer je to mjesto na kojem ćete to učiniti definirati četiri temeljna koncepta (ulazne točke, izlaz, utovarivači, dodatci).

webpack.config.js datoteka drži objekt konfiguracije od kojih svojstava trebate navesti. U ovom članku ćemo odrediti četiri svojstva koja odgovaraju četirima temeljnim konceptima (ulaz, izlaz, modul, i uključiti), ali konfiguracijski objekt ima i druga svojstva.

1. Stvorite ulazne točke

Možeš imati jednu ili više ulaznih točaka. Trebate ih definirati u ulaz svojstvo.

Umetnite sljedeći isječak koda u webpack.config.js datoteka. To određuje jednu ulaznu točku:

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

Za određivanje više od jedne ulazne točke možete koristiti ili sintaksa polja ili objekta.

U mapi projekta, stvorite novo src mapa i a script.js datoteka unutar njega. Ovo će biti vaš ulazna točka. Za potrebe testiranja, samo stavite niz unutar. Koristio sam sljedeće (međutim, možete koristiti i zanimljiviju):

 const greeting = "Bok. Ja sam Webpack starter projekt."; document.write (pozdrav); 

2. Odredite izlaz

Možeš imati samo jedna izlazna datoteka. Webpack skuplja svu imovinu u ovu datoteku. Trebate konfigurirati izlaz imovine na sljedeći način:

 const path = zahtijeva ("put"); module.exports = entry: "./src/script.js", izlaz: filename: "bundle.js", putanja: path.resolve (__dirname, 'dist'); 

naziv datoteke svojstvo definira ime datoteke u paketu, dok staza svojstvo navodi naziv direktorija. Gornji primjer će stvoriti /dist/bundle.js datoteka.

Iako to nije obvezno, bolje je koristiti path.resolve () način kada definirate staza imovine, kao što je osigurava točnu rezoluciju modula (apsolutni put izlaza kreira se prema različitim pravilima u različitim okruženjima, rješenje modula rješava ovu razliku). Ako koristite path.resolve, trebaš zahtijevati staza Modul čvora na vrhu webpack.config.js datoteka.

3. Dodajte utovarivače

Do dodajte utovarivače, morate definirati modul nekretnine. U nastavku ćemo dodati Babel-utovarivač to vam omogućuje sigurno koristiti značajke ECMAScript 6 u JS datotekama:

 const path = zahtijeva ("put"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", putanja: path.resolve (__dirname, 'dist'), module: rules: [test : / js$/, isključiti: / (node_modules | bower_components) /, koristiti: loader: "babel-loader", opcije: presets: ["env"]]]; 

Konfiguracija se može činiti teškom, ali je samo kopirana Dokumentacija Babel loadera. Većina utovarivača dolazi s readme datotekom ili nekom vrstom dokumentacije, tako da možete (gotovo) uvijek znati kako ih pravilno konfigurirati. Dokumenti Webpack-a imaju i stranicu koja objašnjava kako konfigurirati module.rules.

Možete dodati onoliko utovarivača koliko vam je potrebno, ovdje je cijeli popis. Imajte na umu da također trebate instalirajte svaki utovarivač s npm da ih natjeraju da rade. Za Babel loader, morate instalirati potrebne Node pakete s npm:

 npm install --save-dev web-paket babel-core babel-preset-en-babel 

Ako pogledate svoj package.json datoteku, vidjet ćete da je npm dodao tri paketa vezana uz Babel devDependencies svojstvo, oni će se pobrinuti za kompilaciju ES6.

4. Dodajte dodatke

Do dodajte dodatke, trebate navesti dodataka nekretnine. Osim toga, također morate zahtijevati dodataka jedan po jedan, jer su to vanjski moduli.

U našem primjeru dodamo dva Webpack dodatka: HTML WebPack dodatak i Unaprijed učitajte dodatak za Webpack. Webpack ima lijep čep ekosustav, ovdje možete pregledati cijeli popis.

Za zahtijevanje dodataka kao modula čvora, stvorite dvije nove konstante: HtmlWebpackPlugin i PreloadWebpackPlugin i koristiti zahtijevaju () funkcija.

 const path = zahtijeva ("put"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", putanja: path.resolve (__dirname, 'dist'), module: rules: [test : / js$/, isključi: / (node_modules | bower_components) /, koristite: loader: "babel-loader", opcije: presets: ["env"]]], plugins: [new HtmlWebpackPlugin (), novo PreloadWebpackPlugin ()]; 

Baš kao iu slučaju utovarivača, također morate instalirajte Webpack dodatke s npm. Da biste u primjeru instalirali dva dodatka, u naredbenom retku pokrenite sljedeće dvije naredbe:

 npm install html-webpack-plugin --save-dev npm instalacija --save-dev preload-webpack-plugin 

Ako provjerite package.json sada, vidjet ćete da je npm dodao dva dodatka u devDependencies svojstvo.

Pokrenite Webpack

Do stvorite stablo ovisnosti i izlazni snop, pokrenite sljedeću naredbu u naredbenom retku:

 webpack 

Obično traje jednu ili dvije minute za Webpack za izgradnju projekta. Kada završite, u CLI-ju ćete vidjeti sličnu poruku:

Ako je sve ispalo dobro, Webpack stvorio a dist mapa u korijenu vašeg projekta i stavio dvije povezane datoteke (bundle.js i index.html) unutar.

Github repo

Ako želite provjeriti, skinuti ili podijeliti cijeli projekt, pogledajte naš Github repo.