Bevezetés a Webpackhez: mi ez és hogyan kell használni

Bevezetés

Oké, úgy gondolom, hallottál már a webpackről - ezért vagy itt, igaz? Az igazi kérdés az, mit tud róla? Találhat néhány dolgot róla, például hogyan működik, vagy lehet, hogy fogalma sincs. Akárhogy is, biztosíthatom Önöket, hogy a cikk elolvasása után valószínűleg elég jól fogja érezni magát a teljes webpack-helyzettel kapcsolatban.

Végül is - a szükségesség a találmány anyja ...

A fenti idézet tökéletes módja annak, hogy megmondja, miért létezik webpack. De hogy jobban megértsük, vissza kell térnünk vissza, visszafelé, amikor a JavaScript nem volt az új szexi dolog, abban a régi idősebb korban, amikor a webhely csak egy kis csomag jó öreg .html, CSS, és valószínűleg egy vagy egy néhány esetben néhány JavaScript fájl. De hamarosan mindez megváltozott.

Mi volt a gond?

Az egész dev közösség részt vett a javascript / webalkalmazások használatával és kiépítésével kapcsolatos felhasználói és fejlesztői tapasztalatok javításának folyamatos kutatásában. Ezért sok új könyvtárat és keretet mutattunk be.

Néhány tervezési minta is fejlődött az idő múlásával, hogy a fejlesztőknek jobb, erőteljesebb, ám nagyon egyszerű módszert nyújtsanak az összetett JavaScript alkalmazások írására. A korábbi webhelyek nem csupán egy kis csomag, amelyben páratlan számú fájl található. Azt állították, hogy egyre terjedelmesebbé válnak a JavaScript modulok bevezetése, mivel az új trend a kapszulázott kis kóddarabok írása volt. Végül mindez olyan helyzethez vezet, hogy 4x vagy 5x fájlokat töltöttünk el a teljes alkalmazáscsomagban.

Nemcsak az alkalmazás teljes mérete kihívást jelentett, hanem óriási hiány volt abban a tekintetben is, hogy a kódfejlesztők milyen formában írták a kódot és milyen böngészőket tudtak megérteni. A fejlesztőknek sok segítőkódot kellett használniuk, amelyet polyfills-nek hívtak, hogy megbizonyosodjanak arról, hogy a böngészők képesek-e értelmezni a kódot a csomagokban.

Ezekre a kérdésekre a webpack jött létre. A Webpack statikus modulcsomagoló.

Szóval hogyan válaszolt a Webpack?

Röviden: a Webpack végigvezeti a csomagot, és létrehozza azt, amit függőségi gráfnak hív, amely különféle modulokból áll, amelyekre a webappnak szüksége lenne, hogy a várt módon működjön. Ezután, ettől a grafikontól függően, létrehoz egy új csomagot, amely a minimálisan szükséges fájlok számából áll, gyakran csak egy bundle.js fájlból, amely könnyen beilleszthető a html fájlba, és felhasználható az alkalmazáshoz.

A cikk következő részében áttekintjük a webpack lépésről lépésre történő beállítását. Remélem, hogy végül megérti a Webpack alapjait. Tehát engedjük, hogy ez gördülő ...

Mit építünk?

Valószínűleg hallottál a ReactJS-ről. Ha ismeri a reactJS-t, akkor valószínűleg tudja, mi az a create-react-app. Azoknak, akiknek fogalma sincs arról, hogy mi a két dolog, a ReactJS egy felhasználói felület könyvtár, amely nagyon hasznos az intelligens összetett felhasználói felületek felépítésében, és a create-react-app egy CLI eszköz egy kazánlap létrehozására vagy indítására. hogy React alkalmazásokat készítsen.

Ma létrehozunk egy egyszerű React alkalmazást, de a create-react-app CLI használata nélkül. Remélem, ez elég szórakoztatónak tűnik számodra. :)

Telepítési szakasz

npm int

Igaz, hogy kezdődik szinte minden jó dolog: egyszerű öreg npm init. A VS kódot fogom használni, de bátran használhatja a kívánt kódszerkesztőt az induláshoz.

Mielőtt bármit megtenne, gondoljon rá, hogy ellenőrizze, hogy a legújabb nodeJS és az npm verzió telepítve van-e a számítógépén. Kattintson az összes linkre, hogy többet megtudjon a folyamatról.

$ npm init

Ez létrehoz egy indítócsomagot, és hozzáad egy számunkra a package.json fájlt. Itt említik az alkalmazás létrehozásához szükséges összes függőséget.

Egy egyszerű React alkalmazás létrehozásához két fő könyvtárra van szükségünk: React és ReactDOM. Tehát tegyük őket függõségként az alkalmazásunkba az npm használatával.

$ npm reagálok react-dom - takaríthat meg

Ezt követően hozzá kell adnunk egy webpaket, így összekapcsolhatjuk alkalmazásunkat. Nem csak a csomagban, hanem a forró újratöltésre is szükségünk lesz, amely a webpack dev szerver segítségével lehetséges.

$ npm i webpack webpack-dev-server webpack-cli - mentés - dev

A --save - dev célja annak meghatározása, hogy ezek a modulok csak fejlesztői függőségek. Most, hogy a Reaktóval dolgozunk, nem szabad megfeledkeznünk arról, hogy a React ES6 osztályokat és import utasításokat használ, amit minden böngésző nem képes megérteni. Annak biztosítása érdekében, hogy a kód olvasható legyen minden böngészőben, olyan eszközre van szükségünk, mint a babel, hogy a kódot a böngészők normál olvasható kódjába ültessük át.

$ npm én babel-core babel-loader @ babel / preset-react @ babel / preset-env html-webpack-plugin --save-dev

Nos, mit mondhatnék, ez az volt a maximális telepítési szám, amelyet megígérek. A babel esetében először a központi babel könyvtárat, azután a betöltőt, és végül 2 plugint vagy presetet töltöttünk be, hogy kifejezetten a Reaktálással és az összes új ES2015 és ES6 kóddal működjenek.

Most tovább, adjunk hozzá néhány kódot, és kezdjük el a webpack konfigurálását.

Így kell gondolni a package.json fájl az eddigi összes telepítés után. Lehet, hogy más verziószáma van attól függően, hogy mikor követi ezt a cikket.

A kód

Kezdjük azzal, hogy hozzáadunk egy webpack.config.js fájlt az alkalmazás szerkezetének gyökérkörébe. Adja hozzá a következő kódot a webpack.config fájlhoz.

const elérési út = megköveteli ('elérési út');
const HtmlWebpackPlugin = igényelni ('html-webpack-plugin');
module.exports = {
  // Ez a tulajdonság határozza meg az alkalmazás indulásának helyét
  bejegyzés:”./ src / index.js'
  // Ez a tulajdonság meghatározza a fájl elérési útját és a fájl nevét, amelyet a csomagban szereplő fájl telepítéséhez használnak
  Kimenet:{
    elérési út: path.join (__ dirname, '/ dist'),
    fájlnév: 'bundle.js'
  },
  // Telepítő rakodók
  modul: {
    szabályok:
      {
        teszt: /\.js$/,
        kizárja: / node_modules /,
        felhasználás: {
          rakodó: 'babel-loader'
        }
      }
    ]
  },
// Telepítő beépülő modul HTML-fájl használatához a mellékelt js fájlok kiszolgálására
 plugins: [
    új HtmlWebpackPlugin ({
      sablon: './src/index.html'
    })
  ]
}

Oké, értsük meg a fenti vonalakat.

Először azzal kezdjük, hogy megköveteljük az alapértelmezett elérési út modult a fájl helyének eléréséhez és a fájl helyének megváltoztatásához.

Ezután megköveteljük a HTMLWebpackPlugin-től, hogy hozzon létre egy HTML fájlt, amelyet a csomagolt JavaScript fájl / fájlok kiszolgálására használunk. Tudjon meg többet a HTMLWebpackPluginról a linkre kattintva.

Aztán van egy export.module objektum, amelyben vannak néhány tulajdonság is. Az első a beviteli tulajdonság, amely annak meghatározására szolgál, hogy a webpack mely fájljának kell kezdődnie, hogy létrehozzák a belső függőségi gráfot.

module.exports = {
  bejegyzés:”./ src / index.js'
}

Következő lépésként a kimeneti tulajdonság határozza meg, hogy hová kell generálni a kötegelt fájlt, és mi lenne a kötegelt fájl neve. Ezt a output.path és output.filename tulajdonságok teszik lehetővé.

module.exports = {
// Ez a tulajdonság meghatározza a fájl elérési útját és a fájl nevét, amelyet a csomagban szereplő fájl telepítéséhez használnak
  Kimenet:{
    elérési út: path.join (__ dirname, '/ dist'),
    fájlnév: 'bundle.js'
  },
}

Következően a rakodók. Ez meghatározza, hogy a webpacknek mit kell tennie egy adott fájltípushoz. Ne feledje, hogy a webpack a dobozból csak a JavaScriptet és a JSON-t érti, de ha a projekt más nyelvet is használ, akkor ez az a hely, ahol meg lehet határozni, hogy mit kell tenni az új nyelvvel.

module.exports = {
// Telepítő rakodók
  modul: {
    szabályok:
      {
        teszt: /\.js$/,
        kizárja: / node_modules /,
        felhasználás: {
          rakodó: 'babel-loader'
        }
      }
    ]
  }
}

Az információkat objektumban kell megadni minden modultulajdonsághoz, amelyre további szabálysorozatok tartoznak. Minden esetben lesz tárgy. Azt is megadtam, hogy mindent kizártam a node_modules mappámban.

Következő lépés a plugin tulajdonság. Ezzel bővítik a webpack képességeit. Mielőtt egy plugint felhasználhatnánk a modul-exportáló objektumon belüli plugin-tömbben, azt megkövetelnünk kell.

module.exports = {
// Telepítő beépülő modul HTML-fájl használatához a mellékelt js fájlok kiszolgálására
 plugins: [
    új HtmlWebpackPlugin ({
      sablon: './src/index.html'
    })
  ]
}

Ez a konkrét plugin, ahogy korábban kifejtettük, az src mappában szereplő megadott fájlt fogja használni. Ezt követően sablonként fogja használni HTML-fájlunkat, ahol az összes csomagban lévő fájlt automatikusan befecskendezzük. Sok más plug-in is van, amelyeket felhasználhatnánk - további információkért lásd a hivatalos oldalt.

Az utolsó dolog, amit meg kell tennünk, egy .babelrc fájl létrehozása a telepített babel előre beállított fájl használatához, valamint az ES6 osztályok és az utasítások importálása a kódunkba. Adja hozzá a következő kódsorokat a .babelrc fájlhoz.

{
  "előre beállított": ["env", "reagál"]
}

És éppen így, most Babel képes lesz használni ezeket a preseteket. Oké, elegendő a beállításhoz - adjunk hozzá néhány React kódot, hogy megnézze, hogyan működik ez.

React Code

Mivel az alkalmazás kiindulópontja az src mappában található index.js fájl, kezdjük ezzel. Először azzal járunk, hogy ebben az esetben a React és a ReactDOM használatát is igénylik. Adja hozzá az alábbi kódot az index.js fájlhoz.

import Reagálás a „reagálni” -tól;
importálja a ReactDOM-ot a „react-dom” -ból;
importálja az alkalmazást a.. Components/App alkalmazásból;
ReactDOM.render (, document.getElementById ('app'));

Tehát egyszerűen importálunk egy másik fájlt az összetevők mappából, amelyet létrehozunk, és adunk hozzá egy másik fájlt az App.js nevű mappába. Tehát lássuk, mi található az App.js fájlban:

importálja a React, {Component} fájlt a 'react' helyről
osztály App kiterjeszti az összetevőt {
  Vakol() {
    Visszatérés (
      
        

Webpack + A reagálás beállítása

           )   } }
alapértelmezett alkalmazás exportálása;

Már majdnem kész. Jelenleg csak a forró újratöltést lehet engedélyezni. Ez azt jelenti, hogy minden változás észlelésekor a böngésző automatikusan újratölti az oldalt, és képes arra, hogy a megfelelő időben a teljes alkalmazást összeállítsa és csomagolja.

Ezt úgy tehetjük meg, hogy szkriptértékeket adunk hozzá a package.json fájlhoz. Távolítsa el a teszt tulajdonságot a package.json fájl szkriptek objektumában, és adja hozzá a következő két szkriptet:

"start": "webpack-dev-server - mode fejlesztés --open --hot",
"build": "webpack - mode produkció"

Készen vagy! Menjen a terminálra, keresse meg a gyökérmappát, és futtassa az npm start parancsot. El kell indítania a dev szervert a számítógépen, és a HTML fájlt kell szolgálnia a böngészőben. Ha kisebb vagy nagyobb változtatásokat hajt végre, és elmenti a kódot, akkor a böngésző automatikusan frissül, hogy megjelenjen a legújabb változtatások.

Ha úgy gondolja, hogy készen áll az alkalmazás csomagolására, akkor csak meg kell nyomnia az npm build parancsot, és a webpack létrehoz egy optimalizált kötetet a projekt mappájában, amelyet bármilyen webszerverre telepíthet.

Következtetés

Ez csak egy kis alkalmazás vagy webpack és babel felhasználási eset, de az alkalmazások korlátlanok. Remélem, elég izgatott, hogy felfedezhessen több lehetőséget és módszert a webpack és babel használatával. Kérjük, olvassa el hivatalos webhelyüket, ha többet szeretne megtudni és alaposan elolvasni.

Létrehoztam egy Github repo-t az összes benne található kóddal, ezért kérjük, hogy bármilyen kérdésével vegye figyelembe.

Két cent a webpackről? Nos, időnként azt gondolhatja, hogy ez nem más, mint eszköz, és miért kellene túl sokat zavarnia egy szerszámért? De bízz bennem, amikor ezt mondom: a webpack körüli megtanulásakor a kezdeti küzdelem óriási számú órát takarít meg, amelyet egyébként webpack nélküli fejlesztésbe fektetne.

Remélem, hogy hamarosan visszatér egy újabb érdekes cikkhez. Remélem élvezte ezt olvasni!

Ha bármilyen nehézséggel vagy problémával szembesül a fent említett lépések / folyamatok végrehajtása közben, kérjük, bátran vegye fel a kapcsolatot és kommentáljon.

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: https://twitter.com/ashishnandansin