Darbo su „Webpack“ pradžia [su pavyzdiniu projektu]

„Webpack“ yra modulis kuri palengvina sudėtingų „JavaScript“ programų kūrimą. Jis įgijo rimtą traukos jėgą, nes „React“ bendruomenė pasirinko ją kaip pagrindinį kūrimo įrankį. „Webpack“ yra nei paketų tvarkytojas, nei užduoties vykdytojas kadangi jis naudoja kitokį (pažangesnį) metodą, tačiau jo tikslas taip pat yra sukurti dinaminį kūrimo procesą.

„Webpack“ veikia su vanilės „JavaScript“. Galite jį naudoti susieti paraiškos statinį turtą, pavyzdžiui, atvaizdus, ​​šriftus, stilių lenteles, scenarijus į vieną failą rūpintis visomis priklausomybėmis.

Jums nereikės žiniatinklio paketo, kad sukurtumėte paprastą programą ar svetainę, pvz., Tokią, kurioje yra tik vienas „JavaScript“ ir vienas „CSS“ failas ir keli vaizdai, tačiau jis gali būti gyvybės taupymo priemonė sudėtingesnis taikymas su keliais turtais ir priklausomybėmis.

Webpack vs užduočių bėgikai prieš Browserify

Taigi, kaip veikia „Webpack“ palyginti su kitais kūrimo įrankiais pavyzdžiui, Grunt, Gulp arba Browserify?

Grunt ir Gulp yra užduoties bėgikai. Savo konfigūracijos faile jūs nurodyti užduotis, ir užduočių vykdytojas juos vykdo. The užduočių bėgiko darbo eiga iš esmės atrodo taip:

Tačiau „Webpack“ yra a modulis analizuoja visą projektą, nustato priklausomybės medį, ir sukuria susietą „JavaScript“ failą kad jis veikia naršyklėje.

„Browserify“ yra arčiau „Webpack“ nei užduočių bėgikai sukuria priklausomybės grafiką bet tai daro tik „JavaScript“ moduliams. „Webpack“ eina dar vieną žingsnį, o ne tik susieja šaltinio kodą taip pat kitas turtas pvz., vaizdai, stilių lentelės, šriftai ir kt.

Jei norite sužinoti daugiau kaip „Webpack“ lygina kitus kūrimo įrankius, Rekomenduoju jums du straipsnius:

1. Andrew Ray „Webpack“: kada naudoti ir kodėl savo dienoraštyje
2. Cory House Browserify vs Webpack freeCodeCamp (su nuostabiomis iliustracijomis)

Šios dvi iliustracijos yra iš „Pro React“ vadovo „Webpack“ medžiagos, kitas šaltinis, kurį verta žiūrėti.

Keturios pagrindinės „Webpack“ sąvokos

„Webpack“ yra iškviestos keturios pagrindinės konfigūracijos parinktys “pagrindinės sąvokos” kad jums reikės apibrėžti kūrimo procese:

1. Įėjimas - atspirties taškas priklausomybės grafiko (vieno ar daugiau „JavaScript“ failų).
2. Išėjimas - failą, kuriame norite produkcija turi būti susieta su (vienas „JavaScript“ failas).
3. Krautuvai - pokyčius turtu paversti juos „Webpack“ moduliais kad jie galėtų būti pridėta prie priklausomybės grafiko. Pavyzdžiui, css-loader naudojamas CSS failams importuoti.
4. Įskiepiai - pasirinktinius veiksmus ir funkcijas atliekamas ant paketo. Pavyzdžiui, „i18n-webpack-plugin“ įterpia lokalizaciją į paketą.

Krautuvai dirba pagal failą prieš rengiant rinkinį. Įskiepiai vykdomi susietame kode, pabaigoje.

Įdiekite „Webpack“

Į įdiegti „Webpack“, atidarykite komandinę eilutę, pereikite prie projekto aplanko ir paleiskite šią komandą:

 npm init 

Jei nenorite patys atlikti konfigūracijos, galite npm apgyvendinti package.json failą su numatytomis reikšmėmis su tokia komanda:

 npm init -y 

Toliau įdiekite „Webpack“:

 npm įdiegti webpack --save-dev 

Jei naudojote numatytąsias reikšmes, tai kaip jūsų package.json failas turėtų atrodyti dabar (ypatybės gali būti kitokia tvarka):

 "name": "_test", "version": "1.0.0", "description": "", "main": "webpack.config.js", "priklausomybės": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," scenarijai ": " test ":" echo "Klaida: nenurodyta jokio bandymo \ t ": []," autorius ":" "," licencija ":" ISC " 

Sukurkite konfigūracijos failą

Jums reikia sukurti a webpack.config.js failą projekto šakniniame aplanke. Šis konfigūracijos failas atlieka pagrindinį vaidmenį, nes tai yra ten, kur norite apibrėžti keturias pagrindines sąvokas (įvažiavimo taškai, išėjimas, krautuvai, įskiepiai).

The webpack.config.js failą turi konfigūravimo objektą iš kurių savybių reikia nurodyti. Šiame straipsnyje nurodysime keturias savybes atitinka keturias pagrindines sąvokas (įrašas, išvesties, modulis, ir prijungti), bet ir konfigūravimo objektas turi ir kitų savybių.

1. Sukurkite įvedimo tašką (-us)

Gali turėti vieną ar daugiau įvažiavimo taškų. Juos reikia apibrėžti įrašas nuosavybė.

Įterpkite šį kodo fragmentą į webpack.config.js failą. Tai nurodo vieną įvesties tašką:

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

Norėdami nurodyti daugiau nei vieną įvesties tašką, kurį galite naudoti arba masyvo, arba objekto sintaksė.

Savo projekto aplanke, sukurti naują src aplanką ir a script.js failo viduje. Tai bus jūsų įejimas. Bandymų tikslais, tiesiog įdėti eilutę viduje. Aš naudoju vieną (tačiau galite naudoti ir įdomesnį):

 const greeting = "Sveiki. Aš esu Webpack starterio projektas."; document.write (sveikinimas); 

2. Nustatykite išėjimą

Gali turėti tik vienas išvesties failas. „Webpack“ sujungia visą turtą į šį failą. Jums reikia sukonfigūruoti išvesties turtą:

 const path = reikalauti ("path"); module.exports = entry: "./src/script.js", išėjimas: failo pavadinimas: "bundle.js", kelias: path.resolve (__ dirname, 'dist'); 

The failo pavadinimas nuosavybė apibrėžia susieto failo pavadinimas, kol kelias nuosavybė nurodo katalogo pavadinimą. Aukščiau pateiktas pavyzdys sukurs /dist/bundle.js failą.

Nors tai nėra privaloma, geriau naudoti path.resolve () metodas kai nustatote kelias nuosavybė užtikrina tikslią modulio skiriamąją gebą (absoliutus išėjimo kelias sukuriamas pagal skirtingas taisykles skirtingose ​​aplinkose, modulio raiška išsprendžia šį neatitikimą). Jei naudojate path.resolve, tau reikia reikalauti kelias Mazgų modulis viršuje webpack.config.js failą.

3. Pridėti krautuvus

Į pridėkite krautuvus, jums reikia apibrėžti modulis nuosavybė. Toliau pridedame babel-loader tai leidžia jums saugiai naudokite ECMAScript 6 funkcijas JS failuose:

 const path = reikalauti ("path"); module.exports = entry: "./src/script.js", išėjimas: failo pavadinimas: "bundle.js", kelias: path.resolve (__ dirname, 'dist'), modulis: rules: [test : /\.js$/, neįtraukti: / (node_modules | bower_components) /, naudokite: loader: "babel-loader", parinktys: presets: ["env"]]; 

Konfigūracija gali atrodyti sudėtinga, bet ji tiesiog nukopijuojama iš „Babel“ krautuvo dokumentacija. Dauguma krautuvų yra su „readme“ arba tam tikrais dokumentais, todėl galite (beveik) visada žinoti, kaip juos tinkamai konfigūruoti. „Webpack“ dokumentai taip pat turi puslapį, kuriame paaiškinama kaip konfigūruoti modulis.

Galite pridėti tiek daug krautuvų, kiek jums reikia, čia yra visas sąrašas. Atkreipkite dėmesį, kad jums taip pat reikia įdiegti kiekvieną krautuvą su npm kad jie dirbtų. „Babel“ krautuvui reikia įdiegti reikiamus mazgų paketus su npm:

 „npm“ įdiegimas - „babel“ - „babel“ krautuvas „babel-preset-env“ webpack 

Jei pažvelgsite į savo package.json pamatysite, kad npm pridėjo tris su Babeliu susijusius paketus devDependencies nuosavybė, jie rūpinsis ES6 rinkiniu.

4. Pridėkite papildinius

Į pridėkite papildinių, reikia nurodyti įskiepiai nuosavybė. Be to, jūs taip pat turite reikalauti įskiepius po vieną, nes jie yra išoriniai moduliai.

Mūsų pavyzdyje pridedame du „Webpack“ priedus: „ HTML Webpack įskiepis ir Įkrovos tinklo paketo įskiepis. „Webpack“ turi a gražus įskiepio ekosistema, čia galite peržiūrėti visą sąrašą.

Reikalauti, kad įskiepiai būtų „Node“ moduliai, sukurti dvi naujas konstantas: HtmlWebpackPlugin ir PreloadWebpackPlugin ir naudoti reikalauti () funkcija.

 const path = reikalauti ("path"); const HtmlWebpackPlugin = reikia („html-webpack-plugin“); const PreloadWebpackPlugin = reikalauti ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", išėjimas: failo pavadinimas: "bundle.js", kelias: path.resolve (__ dirname, 'dist'), modulis: rules: [test : /\.js$/, neįtraukti: / (node_modules | bower_components) /, naudokite: loader: "babel-loader", parinktys: presets: ["env"]], įskiepiai: [naujas HtmlWebpackPlugin (), naujas PreloadWebpackPlugin ()]; 

Kaip ir krautuvų atveju, jūs taip pat turite įdiegti „Webpack“ įskiepius npm. Jei norite įterpti du pavyzdžius į pavyzdį, komandinėje eilutėje paleiskite šias dvi komandas:

 „npm“ įdiegti „html-webpack-plugin“ - „save-dev npm“ įdiegti - „save-dev“ preload-webpack-plugin 

Jei patikrinate savo package.json dabar pamatysite, kad npm pridėjo du įskiepius devDependencies nuosavybė.

Paleiskite „Webpack“

Į sukurti priklausomybės medį ir išvesties paketą, komandinėje eilutėje paleiskite šią komandą:

 webpack 

Tai paprastai trunka vieną ar dvi minutes Webpack sukurti projektą. Kai baigsite, jūsų CLI matysite panašų pranešimą:

Jei viskas vyko teisingai, „Webpack“ sukurta a dist aplanką jūsų projekto šaknis ir du susietus failus (bundle.js ir index.html) viduje.

Github repo

Jei norite patikrinti, parsisiųsti ar iškirpti visą projektą, peržiūrėkite mūsų „Github“ repo.