Noțiuni de bază cu Webpack [Cu Exemplu de Proiect]

WebPACK este a modulul bundler care facilitează crearea de aplicații JavaScript complexe. A câștigat o tracțiune serioasă, deoarece comunitatea React a ales-o ca instrument de construcție principal. Webpack este nici un manager de pachete, nici un alergător de sarcini deoarece folosește o abordare diferită (mai avansată), dar și scopul său este de a configurați un proces de construire dinamic.

Webpack funcționează cu JavaScript de vanilie. Puteți să-l utilizați bundle activele statice ale unei aplicații, cum ar fi imagini, fonturi, foi de stil, scripturi într-un singur fișier în timp ce având grijă de toate dependențele.

Nu veți avea nevoie de Webpack pentru a crea o aplicație sau un site web simplu, de exemplu unul care are doar un singur JavaScript și un fișier CSS și câteva imagini, cu toate acestea poate fi un salvator de viață pentru o aplicație mai complexă, cu mai multe active și dependențe.

Webpack vs. runners de activități vs. Browserify

Deci, cum se încarcă Webpack în comparație cu alte instrumente de construcție cum ar fi Grunt, Gulp sau Browserify?

Grunt și Gulp sunt alergători. În fișierul config, tu specificați sarcinile, iar alergătorul de execuție le execută. fluxul de lucru al unui alergător practic arata astfel:

Cu toate acestea, Webpack este a modulul bundler care analizează întregul proiect, stabilește un arbore de dependență, și creează un fișier JavaScript asociat că servește pentru browser.

Browserify este mai aproape de Webpack decât alergătorii de activități, așa cum este și el creează un grafic de dependență dar face acest lucru numai pentru modulele JavaScript. Webpack merge cu un pas mai departe, și nu numai pachete cod sursă, dar și alte active cum ar fi imagini, foi de stil, fonturi etc.

Dacă doriți să știți mai multe despre cum compară Webpack cu alte instrumente de construire, Vă recomandăm două articole:

1. Andrew Ray's Webpack: Când să utilizați și de ce pe propriul blog
2. Casa lui Cory Navigați pe Webpack pe freeCodeCamp (cu imagini minunate)

Cele două ilustrații de mai sus sunt din Materialele Webpack din manualul Pro React, o altă resursă care merită privită.

Patru concepte de bază ale Webpack

Webpack are patru opțiuni de configurare principale numite “concepte de baza” că va trebui să definiți în procesul de dezvoltare:

1. Intrare - punct de start din graficul de dependență (unul sau mai multe fișiere JavaScript).
2. producție - fișierul în care doriți ieșirile care urmează să fie grupate în (un fișier JavaScript).
3. Încărcătoare - transformări asupra activelor care le transformați în module Webpack astfel încât acestea să poată fi adăugată la graficul de dependență. De exemplu, css-loader este folosit pentru importul de fișiere CSS.
4. Plugin-uri - acțiuni personalizate și funcționalități executate pe pachet. De exemplu, i18n-WebPACK-plugin încorporează localizarea în pachet.

Încărcătoarele lucrează pe bază de fișiere înainte de realizarea compilației. Plugin-urile sunt executate în codul inclus, la sfârșitul procesului de compilare.

Instalați Webpack

La instalați Webpack, deschideți linia de comandă, navigați la dosarul proiectului și executați următoarea comandă:

 npm init 

Dacă nu doriți să faceți configurația de dvs., puteți face npm populează package.json fișier cu valorile implicite cu următoarea comandă:

 npm init -y 

Apoi, instalați Webpack:

 npm instalează webpack -save-dev 

Dacă ați utilizat valorile implicite, acesta este modul în care vă aflați package.json fișierul ar trebui să arate ca acum (proprietățile pot fi într-o ordine diferită):

 "name": "_tests", "versiunea": "1.0.0", "descriere": "", "main": "webpack.config.js", "dependențe": "webpack" . "" "," DevDependencies ": " webpack ":" ^ 3.6.0 "," scripts " ": []," autor ":" "," licență ":" ISC " 

Creați fișierul de configurare

Trebuie să creați o webpack.config.js fişier în directorul rădăcină al proiectului. Acest fișier de configurare are un rol central, deoarece acesta este locul în care veți dori definesc cele patru concepte de bază (puncte de intrare, ieșire, încărcătoare, pluginuri).

webpack.config.js fişier deține un obiect de configurare din care proprietăți trebuie să specificați. În acest articol, vom specifica cele patru proprietăți corespund celor patru concepte de bază (intrare, producție, modul, și conecteaza), dar obiectul config are și alte proprietăți.

1. Creați punctul (punctele) de intrare

Poti avea unul sau mai multe puncte de intrare. Trebuie să le definiți în intrare proprietate.

Inserați următorul fragment de cod în webpack.config.js fişier. Aceasta specifică un punct de intrare:

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

Pentru a specifica mai multe puncte de intrare pe care le puteți utiliza fie matricea, fie sintaxa obiectului.

În dosarul proiectului, creaza un nou src pliant și a script.js dosar înăuntru. Acesta va fi dvs. punct de intrare. În scopuri de testare, doar plasați un șir inauntru. Am folosit următoarea (cu toate acestea, puteți utiliza și una mai interesantă):

 const greeting = "Bună ziua, sunt un proiect de pornire pentru Webpack."; document.write (salut); 

2. Definiți ieșirea

Poti avea un singur fișier de ieșire. Webpack îmbină toate activele în acest fișier. Trebuie să configurați producție proprietate în felul următor:

 const path = necesită ("cale"); module.exports = entry: "./src/script.js", ieșire: nume fișier: "bundle.js", cale: path.resolve (__ dirname, 'dist'); 

nume de fișier proprietatea definește numele fișierului inclus, in timp ce cale proprietate specifică numele directorului. Exemplul de mai sus va crea /dist/bundle.js fişier.

Deși nu este obligatorie, este mai bine folosește path.resolve () metodă când definiți cale proprietate, așa cum asigură o rezoluție precisă a modulului (calea absolută a ieșirii este creată conform unor reguli diferite în medii diferite, rezoluția modulului rezolvă această discrepanță). Dacă utilizați path.resolve, trebuie să necesita cale Modul nod în partea de sus a webpack.config.js fişier.

3. Adăugați încărcătoarele

La adăugați încărcătoarele, trebuie să definiți modul proprietate. Mai jos, adăugăm babel-loader care vă permite să utilizați în siguranță funcțiile ECMAScript 6 în fișierele JS:

 const path = necesită ("cale"); module.exports = entry: "./src/script.js", ieșire: nume fișier: "bundle.js", cale: path.resolve (__ dirname, 'dist'), modul: rules: [ : /\.js$/, exclude: / (node_modules | bower_components) /, utilizați: loader: "babel-loader", opțiuni: presetări: ["env"]]; 

Config-ul poate părea dificil, dar este doar copy-pasted Documentația încărcătorului Babel. Cele mai multe încărcătoare vin fie cu un fișier readme, fie cu un fel de documentație, astfel încât să puteți (aproape) cunoaște întotdeauna cum să le configurați în mod corespunzător. Documentele Webpack au, de asemenea, o pagină care explică cum se configurează module.rules.

Poti sa adaugi ca multe încărcătoare de care aveți nevoie, Iată lista completă. Rețineți că trebuie, de asemenea instalați fiecare încărcător cu npm pentru a le face să funcționeze. Pentru încărcătorul Babel, trebuie să instalați pachetele Node necesare cu npm:

 npm instalează -save-dev babel-loader babel-core babel-preset-env webpack 

Dacă te uiți la tine package.json fișier, veți vedea că npm au adăugat trei pachete legate de Babel devDependencies proprietate, acestea vor avea grijă de compilația ES6.

4. Adăugați pluginurile

La adăugați pluginurile, trebuie să specificați Plugin-uri proprietate. În plus, trebuie și tu necesita pluginurile unul câte unul, deoarece acestea sunt module externe.

În exemplul nostru, adăugăm două pluginuri Webpack: HTML Webpack plugin si Preload Webpack plugin. Webpack are a frumos ecosistem plugin, puteți naviga pe lista completă aici.

Pentru a solicita plugin-urile ca module de nod, creați două noi constante: HtmlWebpackPlugin și PreloadWebpackPlugin și folosește require () funcţie.

 const path = necesită ("cale"); const HtmlWebpackPlugin = necesită ("html-webpack-plugin"); const PreloadWebpackPlugin = necesită ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", ieșire: nume fișier: "bundle.js", cale: path.resolve (__ dirname, 'dist'), modul: rules: [ : / / node_modules | bower_components) /, utilizați: loader: "babel-loader", opțiuni: presetări: ["env"], plugins: [new HtmlWebpackPlugin (), noul PreloadWebpackPlugin ()]; 

La fel ca și în cazul încărcătoarelor, trebuie, de asemenea instalați pluginurile Webpack cu npm. Pentru a instala cele două plugin-uri în exemplu, executați următoarele două comenzi în linia de comandă:

 npm instalați html-webpack-plugin -save-dev npm instalați -save-dev preload-webpack-plugin 

Dacă vă verificați package.json fișier acum, veți vedea că npm au adăugat cele două pluginuri la devDependencies proprietate.

Rulați Webpack

La creați arborele de dependență și ieșiți pachetul, executați următoarea comandă în linia de comandă:

 WebPACK 

De obicei durează un minut sau două pentru Webpack pentru a construi proiectul. Când ați terminat, veți vedea un mesaj similar în CLI:

Dacă totul merge bine Webpack a creat a dist pliant în rădăcina proiectului dvs. și plasate cele două fișiere (bundle.js și index.html) inauntru.

Github repo

Dacă doriți să verificați, să descărcați sau să vă întrebați întregul proiect, aruncați o privire la repo Github.