Első lépések a Webpack használatával [példa projektekkel]

Webpack egy modul bundler amely lehetővé teszi a bonyolult JavaScript alkalmazások kiépítését. Súlyos vontatást szerzett, mivel a React közösség a főépítő eszköze. A Webpack sem a csomagkezelő, sem a feladatvezető mivel más (fejlettebb) megközelítést használ, de célja is dinamikus építési folyamat létrehozása.

A webcsomag vanília JavaScript használatával működik. Használhatja az alkalmazás statikus eszközeinek kötegelése, mint például képek, betűtípusok, stíluslapok, szkriptek egyetlen fájlba minden függőség gondozása.

Nem kell webcsomagot létrehoznia egy egyszerű alkalmazás vagy webhely létrehozásához, például olyannak, amely csak egy JavaScript-t és egy CSS-fájlt és néhány képet tartalmaz, de az életmentő lehet egy bonyolultabb alkalmazás több eszközzel és függőséggel.

Webpack vs feladat futók vs Browserify

Szóval, hogyan halad fel a Webpack más építési eszközökhöz képest például Grunt, Gulp vagy Browserify?

Grunt és Gulp feladatok. A konfigurációs fájlban adja meg a feladatokat, és a feladat futója végrehajtja őket. A egy feladat futó munkafolyamata alapvetően így néz ki:

A Webpack azonban a modul bundler az egész projektet elemzi, beállít egy függőségi fát, és létrehoz egy mellékelt JavaScript fájlt hogy a böngésző szolgál.

A Browserify közelebb van a Webpack-hoz, mint a feladat futók egy függőségi gráfot hoz létre de csak ezt teszi JavaScript modulokhoz. A webcsomag egy lépéssel tovább megy, és nemcsak a forráskódot csomagolja, hanem más eszközöket is képeket, stíluslapokat, betűtípusokat stb.

Ha többet szeretne tudni hogyan hasonlítja össze a Webpack más építési eszközökkel, Két cikket ajánlok:

1. Andrew Ray Webcsomag: Mikor kell használni és miért saját blogján
2. Cory House Browserify vs Webpack a freeCodeCamp-on (félelmetes illusztrációkkal)

A fenti két illusztráció a A Pro React kézikönyv webes csomagolásának anyagai, egy másik erőforrás, amit érdemes megnézni.

A Webpack négy alapvető fogalma

A Webpack rendelkezik négy fő konfigurációs opció hívható “alapvető fogalmak” hogy a fejlesztési folyamatban meg kell határoznia:

1. Belépés - a kiindulópont a függőségi gráf (egy vagy több JavaScript-fájl).
2. kibocsátás - a fájlt, ahová a a kimenet kötegelve (egy JavaScript-fájl).
3. homlokrakodók - átalakítja az eszközöket Webpack modulokká alakítsa őket úgy, hogy lehetnek hozzáadódik a függőségi gráfhoz. Például, css-rakodó a CSS fájlok importálására szolgál.
4. Dugó - egyéni műveletek és funkciók a csomagban. Például a i18n-webpack-plugin beágyazza a lokalizációt a csomagba.

A rakodók fájlonként működnek összeállítás előtt. A bővítményeket a mellékelt kódon hajtják végre, az összeállítási folyamat végén.

Telepítse a Webpack csomagot

Nak nek telepítse a Webpack-ot, nyissa meg a parancssort, navigáljon a projekt mappájába, és futtassa a következő parancsot:

 npm init 

Ha nem akarod magad elvégezni a konfigurációt, akkor npm-et tehetsz betölti a package.json fájl alapértelmezett értékekkel a következő paranccsal:

 npm init -y 

Ezután telepítse a Webpack-ot:

 npm telepítse webpack --save-dev 

Ha az alapértelmezett értékeket használta, akkor ez az, ahogy a package.json a fájlnak most kell kinéznie (a tulajdonságok eltérő sorrendben lehetnek):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "függőségek": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," szkriptek ": " test ":" visszhang "Hiba: nincs teszt megadott" && exit 1 "," kulcsszavak " ": []," szerző ":" "," licenc ":" ISC " 

Hozza létre a konfigurációs fájlt

Létre kell hoznia a webpack.config.js fájl a projekt gyökérmappájában. Ez a konfigurációs fájl központi szerepet játszik, mivel ez az a hely, ahol lesz meghatározza a négy alapvető fogalmat (belépési pontok, kimenetek, rakodók, bővítmények).

A webpack.config.js fájl rendelkezik egy konfigurációs objektummal amelynek tulajdonságait meg kell adni. Ebben a cikkben megadjuk a négy tulajdonságot megfelelnek a négy alapvető fogalomnak (belépés, kibocsátás, modul, és csatlakoztat), de a konfigurációs objektumnak más tulajdonságai is vannak.

1. Hozzon létre egy belépési pontot

Megkaphatod egy vagy több belépési pont. Meg kell határozni őket a belépés ingatlan.

Helyezze be a következő kódrészletet a webpack.config.js fájlba. Azt egy belépési pontot határoz meg:

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

Egynél több belépési pont meghatározása vagy a tömb vagy az objektum szintaxisa.

A projekt mappájában, újat csinálni src mappa és a script.js fájl belsejében. Ez lesz az belépési pont. Csak tesztelés céljából helyezzen egy karakterláncot benne. A következőt használtam (azonban még egy érdekesebb is használható):

 const greeting = "Szia. Webpack indító projekt vagyok."; document.write (üdvözlő); 

2. Adja meg a kimenetet

Megkaphatod csak egy kimeneti fájl. A webcsomag az összes eszközt a fájlba csomagolja. Be kell állítania a kibocsátás a következő módon:

 const path = szükséges ("path"); module.exports = entry: "./src/script.js", kimenet: fájlnév: "bundle.js", elérési út: path.resolve (__ dirname, 'dist'); 

A fájl név tulajdonság határozza meg a a mellékelt fájl neve, amíg a pálya ingatlan meghatározza a könyvtár nevét. A fenti példa létrehozza a /dist/bundle.js fájl.

Bár ez nem kötelező, jobb használja a path.resolve () eljárás ha meghatározza a pálya vagyon biztosítja a modul pontos felbontását (a kimenet abszolút elérési útja a különböző szabályok szerint különböző környezetben jön létre, a modul felbontása megoldja ezt az eltérést). Ha használja path.resolve, neked kell kíván a pálya Csomópont modul a tetején webpack.config.js fájl.

3. Adja hozzá a rakodókat

Nak nek add hozzá a rakodókat, meg kell határoznia a modul ingatlan. Az alábbiakban a Babel-rakodó amely lehetővé teszi biztonságosan használja az ECMAScript 6 funkciókat a JS-fájljaiban:

 const path = szükséges ("path"); module.exports = entry: "./src/script.js", kimenet: fájlnév: "bundle.js", elérési út: path.resolve (__ dirname, 'dist'), modul: szabályok: [teszt : /\.js$/, kizárja: / (node_modules | bower_components) /, használja: loader: "babel-loader", opciók: presets: ["env"]]; 

A konfiguráció nehéznek tűnhet, de csak másolja be Babel rakodó dokumentációja. A legtöbb rakodógép vagy egy readme fájlt vagy valamilyen dokumentumot tartalmaz, így (szinte) mindig tudja, hogyan kell megfelelően konfigurálni őket. A Webpack dokumentumoknak van egy oldala is, amely magyarázza hogyan kell beállítani module.rules.

Hozzáadhat annyi rakodógép, amennyire szüksége van, itt van a teljes lista. Ne feledje, hogy szükség van rá telepítse az egyes rakodókat npm-rel hogy dolgozzanak. A Babel betöltő számára telepíteni kell a szükséges node csomagokat npm-rel:

 npm telepítés --save-dev babel-loader babel-core babel-preset-env webpack 

Ha megnézed a sajátodat package.json látni fogja, hogy npm három Babelhez kapcsolódó csomagot adott hozzá devDependencies ingatlan, ezek gondoskodnak az ES6 összeállításáról.

4. Adja hozzá a bővítményeket

Nak nek add hozzá a bővítményeket, meg kell adnia a plugins ingatlan. Plusz, meg kell kíván a bővítményeket egyenként, külső modulok.

Példánkban két Webpack plugint adunk hozzá: a HTML Webpack plugin és a A webcsomag beépülő modulja. A Webpack a szép plugin ökoszisztéma, itt megtekintheti a teljes listát.

A modulok modulcsomópontként való használatához, két új konstans létrehozása: HtmlWebpackPlugin és PreloadWebpackPlugin és használja a require () funkció.

 const path = szükséges ("path"); const HtmlWebpackPlugin = szükséges ("html-webpack-plugin"); const PreloadWebpackPlugin = szükséges ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", kimenet: fájlnév: "bundle.js", elérési út: path.resolve (__ dirname, 'dist'), modul: szabályok: [teszt : /\.js$/, kizárja: / (node_modules | bower_components) /, használja: loader: "babel-loader", opciók: presets: ["env"]], bővítmények: [új HtmlWebpackPlugin (), új PreloadWebpackPlugin ()]; 

Csakúgy, mint a rakodógépek esetében is telepítse a Webpack bővítményeket npm-rel. A két plugin telepítéséhez a következő két parancsot kell futtatnia a parancssorban:

 npm telepítse a html-webpack-plugint --save-dev npm telepítése --save-dev preload-webpack-plugin 

Ha ellenőrizted package.json most már látni fogja, hogy npm hozzáadta a két plugint a devDependencies ingatlan.

A Webpack futtatása

Nak nek hozzon létre egy függőségfát és a csomagot, futtassa a következő parancsot a parancssorban:

 webpack 

Ez általában egy vagy két percig tart a Webpack számára a projekt építéséhez. Ha elkészült, hasonló üzenet jelenik meg a CLI-ben:

Ha minden jól megy, a Webpack létrehozott a ker mappa a projekt gyökerében és elhelyezte a két mellékelt fájlt (bundle.js és index.html) benne.

Github repo

Ha meg szeretné nézni, letölteni vagy villogni az egész projektet, nézze meg a Github repóját.