Kako začeti z Webpackom [s primernim projektom]

Spletni paket je modul za povezovanje , ki omogoča gradnjo kompleksnih aplikacij JavaScript. Pridobila je resen oprijem, saj je skupnost React izbrala to glavno orodje za gradnjo. Webpack je niti upravitelj paketov niti izvajalec nalog ker uporablja drugačen (naprednejši) pristop, vendar je njegov cilj tudi vzpostavite dinamični postopek izdelave.

Webpack deluje z vanilijevim JavaScriptom. Uporabite ga lahko statična sredstva aplikacije, kot so slike, pisave, slogovne datoteke, skripte v eno samo datoteko skrbi za vse odvisnosti.

Za izdelavo preproste aplikacije ali spletnega mesta ne boste potrebovali spletnega paketa, na primer tistega, ki ima samo en JavaScript in eno datoteko CSS ter nekaj slik, vendar je lahko reševalec življenja za bolj kompleksna uporaba z več sredstvi in ​​odvisnostmi.

Spletni strežnik vs

Torej, kako Webpack stack up v primerjavi z drugimi orodji za gradnjo Grunt, Gulp ali Browserify?

Grunt in Gulp so tekmovalci. V svoji konfiguracijski datoteki določite naloge, in tekač opravil jih izvede. The potek dela izvajalca nalog v bistvu izgleda tako:

Vendar pa je Webpack a modul za povezovanje ki analizira celoten projekt, nastavi drevo odvisnosti, in ustvari povezano datoteko JavaScript ki jo uporablja za brskalnik.

Browserify je bližje Webpacku kot izvajalcem nalog, kot tudi ustvarja graf odvisnosti vendar le tako za module JavaScript. Webpack gre še korak dlje in ne združuje samo izvorne kode tudi druga sredstva slike, slogovne sloge, pisave itd.

Če želite izvedeti več o tem kako se Webpack primerja z drugimi orodji za gradnjo, Priporočam vam dva članka:

1. Andrew Ray Spletni paket: kdaj uporabljati in zakaj na svojem blogu
2. Cory House Browserify vs Webpack na freeCodeCamp (z odličnimi ilustracijami)

Zgornji sliki sta od Spletni materiali priročnika Pro React, drug vir, ki je vreden ogleda.

Štirje osnovni koncepti Webpack-a

Webpack ima štiri glavne konfiguracijske možnosti “temeljnih konceptov” ki jih boste morali opredeliti v razvojnem procesu:

1. Vnos - Izhodišče grafa odvisnosti (ena ali več datotek JavaScript).
2. Izhod - datoteko, kjer želite proizvodnje (ena datoteka JavaScript).
3. Nakladalniki - preoblikovanja sredstev pretvorite jih v module Webpack tako da so lahko dodan v graf odvisnosti. Na primer, css-loader se uporablja za uvoz CSS datotek.
4. Vtičniki - dejanja in funkcionalnosti po meri na svežnju. Na primer, i18n-webpack-plugin vgrajuje lokalizacijo v snop.

Nakladalci delujejo na podlagi posamezne datoteke pred sestavljanjem. Vtičniki se izvajajo v paketih, na koncu postopka zbiranja.

Namestite Webpack

Za namestite Webpack, Odprite ukazno vrstico, pojdite v mapo projekta in zaženite naslednji ukaz:

 npm init 

Če konfiguracije ne želite narediti sami, lahko naredite npm zapolnite package.json datoteko s privzetimi vrednostmi z naslednjim ukazom:

 npm init -y 

Nato namestite Webpack:

 npm install webpack --save-dev 

Če ste uporabili privzete vrednosti, je to vaš način package.json Datoteka bi morala izgledati zdaj (lastnosti so lahko v drugačnem vrstnem redu):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "odvisnosti": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skripte ": " test ":" echo "Napaka: noben preskus ni naveden" && exit 1 "," ključne besede ": []," avtor ":" "," licenca ":" ISC " 

Ustvarite konfiguracijsko datoteko

Ustvariti morate a webpack.config.js mapa v korenski mapi projekta. Ta konfiguracijska datoteka ima osrednjo vlogo, saj bo to tam opredeliti štiri temeljne koncepte (vstopne točke, izhod, nakladalniki, vtičniki).

The webpack.config.js mapa ima konfiguracijski objekt katere lastnosti morate določiti. V tem članku bomo določili štiri lastnosti ustrezajo štirim temeljnim konceptom (vnos, izhod, modul, in vključiti), vendar ima tudi konfiguracijski objekt druge lastnosti.

1. Ustvarite vstopne točke

Lahko imaš eno ali več vstopnih točk. Definirati jih morate v vnos nepremičnine.

Vstavite naslednji odrezek kode v webpack.config.js mapa. To določa eno vstopno točko:

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

Če želite določiti več kot eno vstopno točko, ki jo lahko uporabite ali sintaksa polja ali predmeta.

V mapi projekta, ustvarite novo src mapo in a script.js v njej. To bo vaš Vstopna točka. Za namene testiranja, samo postavite niz znotraj njega. Uporabil sem naslednjega (vendar lahko uporabite tudi bolj zanimivo):

 const greeting = "Pozdravljeni. Sem projekt za zagon Webpack."; document.write (pozdrav); 

2. Določite izhod

Lahko imaš samo eno izhodno datoteko. Webpack združi vsa sredstva v to datoteko. Konfigurirati morate izhod na naslednji način:

 const path = require ("pot"); module.exports = entry: "./src/script.js", izhod: filename: "bundle.js", pot: pot.resolve (__dirname, 'dist'); 

The Ime datoteke lastnost opredeljuje ime združene datoteke, medtem ko poti nepremičnine določa ime imenika. Zgornji primer bo ustvaril /dist/bundle.js mapa.

Čeprav ni obvezno, je bolje uporabi path.resolve () metodo ko določite poti lastnine, kot je zagotavlja natančno ločljivost modula (absolutna pot izhodov se ustvari po različnih pravilih v različnih okoljih, modulska rešitev rešuje to neskladje). Če uporabljate poti, moraš zahtevajo poti Modul vozlišča na vrhu webpack.config.js mapa.

3. Dodajte nakladalnike

Za dodajte nakladalnike, morate določiti modul nepremičnine. Spodaj dodamo babel-loader ki vam omogoča varno uporablja funkcije ECMAScript 6 v datotekah JS:

 const path = require ("pot"); module.exports = entry: "./src/script.js", izhod: filename: "bundle.js", pot: path.resolve (__ dirname, 'dist'), modul: rules: [test : / js$/, izključi: / (node_modules | bower_components) /, uporabi: loader: "babel-loader", možnosti: prednastavitve: ["env"]]]; 

Konfiguracija se morda zdi težka, vendar jo je mogoče samo kopirati Dokumentacija Babelovega tovora. Večina nakladalcev prihaja z datoteko readme ali kakšno dokumentacijo, tako da lahko (skoraj) vedno veste, kako jih pravilno konfigurirati. Dokumenti Webpack imajo tudi stran, ki pojasnjuje kako konfigurirati module.rules.

Dodate lahko toliko nakladalcev, kot jih potrebujete, Tukaj je celoten seznam. Upoštevajte, da morate tudi to storiti vsak nakladalnik namestite z npm da delajo. Za nalagalnik Babel morate namestiti potrebne pakete Node z npm:

 npm install --save-dev babel-loader spletno mesto babel-prednastavitev-env 

Če imate pogled na svoje package.json datoteko, boste videli, da je npm dodal tri pakete, povezane z Babel devDependencies nepremičnine, ti bodo poskrbeli za kompilacijo ES6.

4. Dodajte vtičnike

Za dodajte vtičnike, morate določiti plugins nepremičnine. Plus, tudi vi morate zahtevajo plugins enega za drugim, ker so zunanji moduli.

V našem primeru dodamo dva vtičnika Webpack: Vtičnik za HTML Webpack in Prednapetost vtičnika Webpack. Webpack ima a lep čep ekosistem, Tu lahko pregledate celoten seznam.

Za zahtevanje vtičnikov kot modulov Node, ustvarite dve novi konstanti: HtmlWebpackPlugin in PreloadWebpackPlugin in uporabi zahtevaj () funkcijo.

 const path = require ("pot"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", izhod: filename: "bundle.js", pot: path.resolve (__ dirname, 'dist'), modul: rules: [test : / js$/, izključi: / (node_modules | bower_components) /, uporabite: loader: "babel-loader", možnosti: prednastavitve: ["env"]]], plugins: [new HtmlWebpackPlugin (), novo PreloadWebpackPlugin ()]; 

Tako kot v primeru nakladalnikov morate tudi namestite vtičnike Webpack z npm. Če želite namestiti dva vtičnika v primer, zaženite naslednje ukaze v ukazni vrstici:

 npm namestite html-webpack-plugin --save-dev npm namestite --save-dev preload-webpack-plugin 

Če preverite package.json zdaj, boste videli, da je npm dodal dva vtičnika v devDependencies nepremičnine.

Zaženite Webpack

Za ustvarite drevo odvisnosti in izhodni paket, v ukazni vrstici zaženite naslednji ukaz:

 webpack 

Ponavadi traja eno ali dve minuti za Webpack graditi projekt. Ko končate, boste v sporočilu CLI videli podobno sporočilo:

Če je vse šlo prav Webpack ustvaril a dist mapo v korenu vašega projekta in postavil dve združeni datoteki (bundle.js in index.html) znotraj njega.

Github repo

Če želite pregledati, prenesti ali razdeliti celoten projekt, si oglejte našo Github repo.