Aloitus Webpack-pakkauksessa [esimerkkihankkeella]

webpack on moduulin niputtaja joka mahdollistaa monimutkaisten JavaScript-sovellusten rakentamisen. Se on saavuttanut vakavan vetovoiman, koska React-yhteisö valitsi sen tärkeimmäksi rakennustyökaluksi. Webpack on ei pakettien hallinnoijaa eikä tehtävän juoksijaa sillä se käyttää eri (kehittyneempää) lähestymistapaa, mutta sen tavoitteena on myös perustaa dynaaminen rakennusprosessi.

Webpack toimii vanilja JavaScriptin kanssa. Voit käyttää sitä liittää sovelluksen staattiset varat, kuten kuvat, fontit, tyylitaulukot, skriptit yhdeksi tiedostoksi huolehtimalla kaikista riippuvuuksista.

Sinun ei tarvitse Web-pakettia, jos haluat luoda yksinkertaisen sovelluksen tai verkkosivuston, esimerkiksi sellaisen, jolla on vain yksi JavaScript ja yksi CSS-tiedosto ja muutama kuva, mutta se voi olla elämää säästävä. monimutkaisempi sovellus, jossa on useita varoja ja riippuvuuksia.

Verkkopaketti vs. tehtävän juoksijat vs. Browserify

Joten, miten Webpack pinoaa ylös verrattuna muihin rakennustyökaluihin kuten Grunt, Gulp tai Browserify?

Grunt ja Gulp ovat tehtäviä. Sinun on määritettävä konfigurointitiedostossa määritä tehtävät, ja tehtävän juoksija suorittaa ne. työnkulkijan työnkulku pohjimmiltaan näyttää tältä:

Webpack on kuitenkin a moduulin niputtaja joka analysoi koko hankkeen, asettaa riippuvuuspuun, ja luo yhdistetyn JavaScript-tiedoston että se toimii selaimella.

Browserify on lähempänä Webpack-pakettia kuin tehtävät luo riippuvuusgraafin mutta se tekee niin JavaScript-moduuleille. Webpack menee askeleen pidemmälle ja se ei vain niputtaa lähdekoodia vaan myös muita varoja kuten kuvat, tyylitaulukot, fontit jne.

Jos haluat tietää lisää miten Webpack vertaa muihin rakennustyökaluihin, Suosittelen teitä kaksi artikkelia:

1. Andrew Ray Verkkopaketti: Milloin käyttää ja miksi omassa blogissaan
2. Cory House Browserify vs. Webpack freeCodeCampissa (upeilla kuvilla)

Yllä olevat kaksi kuvaa ovat Pro React-käsikirjan Webpack-materiaalit, toinen voimavara, joka kannattaa katsoa.

Neljä keskeistä Webpack-konseptia

Webpackissa on neljä pääasetusta, joita kutsutaan “keskeiset käsitteet” että sinun on määriteltävä kehitysprosessissa:

1. merkintä - lähtökohta riippuvuusgraafista (yksi tai useampi JavaScript-tiedosto).
2. ulostulo - tiedosto, johon haluat tuotos liitetään (yksi JavaScript-tiedosto).
3. Kuormaaja - varojen muutokset muuntaa ne Webpack-moduuleiksi niin että he voivat olla lisätään riippuvuusgraafiin. Esimerkiksi, css-loader käytetään CSS-tiedostojen tuontiin.
4. liitännäiset - mukautetut toimet ja toiminnot suoritetaan nipussa. Esimerkiksi i18n-webpack-plugin upottaa paikannuksen nippuun.

Kuormaajat toimivat per tiedostoa ennen kokoamisen alkamista. Lisäosat suoritetaan yhdistetyssä koodissa, kokoamisprosessin lopussa.

Asenna Webpack

jotta asenna Webpack, avaa komentorivi, siirry projektikansioon ja suorita seuraava komento:

 npm init 

Jos et halua tehdä asetuksia itse, voit tehdä npm: n täyttää package.json tiedosto, jossa on oletusarvot seuraavalla komennolla:

 npm init -y 

Seuraavaksi asenna Webpack:

 npm asenna webpack - save-dev 

Jos olet käyttänyt oletusarvoja, tämä on miten package.json tiedoston pitäisi näyttää nyt (ominaisuudet voivat olla eri järjestyksessä):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "riippuvuudet": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," skriptit ": " test ":" echo "Virhe: ei määrätty testiä" && exit 1 "," avainsanat ": []," tekijä ":" "," lisenssi ":" ISC " 

Luo kokoonpanotiedosto

Sinun täytyy luoda a webpack.config.js tiedosto projektin juurikansioon. Tällä kokoonpanotiedostolla on keskeinen rooli, koska se on juuri silloin määritellä neljä keskeistä käsitettä (tulopisteet, lähtö, kuormaajat, lisäosat).

webpack.config.js tiedosto pitää kokoonpano-objektia josta ominaisuuksia sinun on määriteltävä. Tässä artikkelissa määritellään neljä ominaisuutta vastaavat neljää keskeistä käsitettä (merkintä, ulostulo, moduuli, ja kytkeä), mutta konfigurointiobjektilla on myös muita ominaisuuksia.

1. Luo syöttöpiste (t)

Voit saada yhden tai useamman tulopisteen. Sinun on määritettävä ne merkintä omaisuus.

Lisää seuraava koodinpätkä webpack.config.js tiedosto. Se määrittää yhden tulopisteen:

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

Voit määrittää useamman kuin yhden syöttöpisteen, jota voit käyttää joko matriisin tai objektin syntaksin.

Projektin kansiossa, luoda uusi src kansio ja a script.js tiedoston sisällä. Tämä on sinun sisääntulopiste. Testitarkoituksiin, juuri sijoita merkkijono sen sisällä. Käytin seuraavaa (mutta voit myös käyttää mielenkiintoisempaa):

 const greeting = "Hei. Olen Webpack-käynnistysprojekti."; document.write (tervehdys); 

2. Määritä lähtö

Voit saada vain yksi tulostustiedosto. Verkkopaketti yhdistää kaikki varat tähän tiedostoon. Sinun on määritettävä ulostulo omaisuutta seuraavalla tavalla:

 const path = vaadi ("polku"); module.exports = entry: "./src/script.js", lähtö: tiedostonimi: "bundle.js", polku: path.resolve (__ dirname, 'dist'); 

Tiedoston nimi omaisuus määrittää yhdistetyn tiedoston nimi, samalla kun polku omaisuus määrittää hakemiston nimen. Yllä oleva esimerkki luo /dist/bundle.js tiedosto.

Vaikka se ei ole pakollista, on parempi Käytä path.resolve () menetelmä kun määrität polku omaisuutta varmistaa tarkan moduulin tarkkuuden (tuotoksen absoluuttinen polku luodaan eri sääntöjen mukaisesti eri ympäristöissä, moduulin resoluutio ratkaisee tämän poikkeaman). Jos käytät path.resolve, sinun täytyy vaatia polku Solmumoduuli yläreunassa webpack.config.js tiedosto.

3. Lisää kuormaajat

jotta lisää kuormaajat, sinun täytyy määrittää moduuli omaisuutta. Alla lisätään Babel-loader jonka avulla voit käyttää ECMAScript 6 -ominaisuuksia turvallisesti JS-tiedostoissasi:

 const path = vaadi ("polku"); module.exports = entry: "./src/script.js", ulostulo: tiedostonimi: "bundle.js", polku: path.resolve (__ dirname, 'dist'), moduuli: rules: [test : /\.js$/, sulje pois: / (node_modules | bower_components) /, käytä: loader: "babel-loader", vaihtoehdot: presets: ["env"]]; 

Määritys saattaa tuntua vaikealta, mutta se on vain kopioitu Babelin kuormaajan dokumentaatio. Useimmissa kuormaimissa on joko readme-tiedosto tai jonkinlainen dokumentaatio, joten voit (melkein) aina tietää, miten ne voidaan määrittää oikein. Webpack-dokumenteilla on myös sivu, joka selittää miten määrittää module.rules.

Voit lisätä niin monta kuormainta kuin tarvitset, tässä on täydellinen luettelo. Huomaa, että sinun täytyy myös asenna jokainen kuormain npm: llä tehdä niistä työtä. Babelin kuormaajalle on asennettava tarvittavat solmupaketit, joiden npm:

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

Jos katsot omaa package.json tiedosto, näet, että npm lisäsi kolme Babelin liittyviä paketteja devDependencies omaisuus, nämä huolehtivat ES6-kokoelmasta.

4. Lisää lisäosat

jotta lisää plugins, sinun on määritettävä liitännäiset omaisuutta. Lisäksi sinun täytyy myös vaatia plugins yksi kerrallaan, koska ne ovat ulkoisia moduuleja.

Esimerkissämme lisätään kaksi Webpack-laajennusta: HTML-verkkopaketin laajennus ja Esilataus Webpack-laajennus. Webpackissa on a mukava plugin ekosysteemi, voit selata koko luetteloa täällä.

Lisäosien asettaminen solmumoduuleiksi, luo kaksi uutta vakiota: HtmlWebpackPlugin ja PreloadWebpackPlugin ja Käytä vaatia() toimia.

 const path = vaadi ("polku"); const HtmlWebpackPlugin = vaadi ("html-webpack-plugin"); const PreloadWebpackPlugin = vaadi ("esilataus-webpack-plugin"); module.exports = entry: "./src/script.js", ulostulo: tiedostonimi: "bundle.js", polku: path.resolve (__ dirname, 'dist'), moduuli: rules: [test : /\.js$/, sulje pois: / (node_modules | bower_components) /, käytä: loader: "babel-loader", vaihtoehdot: presets: ["env"]], plugins: [new HtmlWebpackPlugin () uusi PreloadWebpackPlugin ()]; 

Aivan kuten kuormaimien tapauksessa, sinun täytyy myös asenna Webpack-laajennukset, joissa on npm. Voit asentaa esimerkkiin kaksi lisäosaa suorittamalla seuraavat kaksi komentoa komentorivillä:

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

Jos tarkistat package.json tiedosto nyt, näet, että npm lisäsivät kaksi lisäosaa devDependencies omaisuus.

Suorita Webpack

jotta luo riippuvuuspuu ja lähetä paketti, suorita seuraava komento komentorivillä:

 webpack 

Se on yleensä kestää yhden tai kaksi minuuttia Webpackin rakentaminen hankkeen rakentamiseen. Kun olet valmis, näet vastaavan viestin CLI: ssä:

Jos kaikki meni oikein, Webpack luotu a dist kansio hankkeen juuressa ja asettanut kaksi niputettua tiedostoa (bundle.js ja index.html) sen sisällä.

Github repo

Jos haluat tarkistaa, ladata tai haarata koko projektin, tutustu Githubin repoon.