Webpack este un instrument care vă permite să compilați module JavaScript. Este, de asemenea, cunoscut sub numele de pachet de module.

Având în vedere un număr mare de fișiere, acesta generează un singur fișier (sau câteva fișiere) care rulează aplicația dvs.

Poate efectua multe operații:

  • vă ajută să vă grupați resursele.
  • urmărește modificările și rulează din nou sarcinile.
  • poate rula transpilația Babel la ES5, permițându-vă să utilizați cele mai recente JavaScript funcționalități fără să vă faceți griji cu privire la suportul browserului.
  • poate transpune CoffeeScript în JavaScript
  • poate converti imagini inline în URI-uri de date.
  • vă permite să utilizați require () pentru fișiere CSS.
  • poate rula un server web de dezvoltare.
  • poate gestiona înlocuirea modulului fierbinte.
  • poate împărți fișierele de ieșire în mai multe fișiere pentru a evita încărcarea unui fișier JS imens în prima pagină accesată.
  • poate efectua tremurarea copacilor.

Webpack nu se limitează la utilizarea pe front-end, ci este util și în dezvoltarea backend-ului Node.js.

Există mulți predecesori ai Webpack și o mulțime de asemănări în ceea ce fac acele instrumente și Webpack. Principala diferență este că aceste instrumente sunt cunoscute sub numele de alergători de sarcini, în timp ce Webpack s-a născut ca un grup de module.

Webpack este un instrument mai concentrat. Trebuie doar să specificați un punct de intrare pentru aplicația dvs. (ar putea fi chiar un fișier HTML cu etichete script) și webpack analizează fișierele și le grupează într-un singur fișier de ieșire JavaScript care include tot ce aveți nevoie pentru a rula aplicația.

Instalarea Webpack

Webpack poate fi instalat global sau local pentru fiecare proiect.

Instalare globală

Iată cum să-l instalați global Fire:

yarn global add webpack webpack-cli

cu npm:

npm i -g webpack webpack-cli

odată ce ați făcut acest lucru, ar trebui să puteți rula

webpack-cli
Introducere pentru incepatori in Webpack

Instalare locală

Webpack poate fi instalat și local. Este setarea recomandată, deoarece Webpack poate fi actualizat per proiect și aveți mai puțină rezistență la utilizarea celor mai recente caracteristici doar pentru un proiect mic, decât la actualizarea tuturor proiectelor pe care le aveți care utilizează Webpack.

Cu Fire:

yarn add webpack webpack-cli -D

cu npm:

npm i webpack webpack-cli --save-dev

Odată ce ați terminat, adăugați acest lucru la package.json fişier:

{   //...   "scripts": {     "build": "webpack"   } }

După ce ați făcut acest lucru, puteți rula Webpack tastând

yarn build

în rădăcina proiectului.

Configurare Webpack

În mod implicit, Webpack (începând cu versiunea 4) nu necesită nicio configurare dacă respectați aceste convenții:

  • punct de intrare din aplicația dvs. este ./src/index.js
  • ieșirea este introdusă ./dist/main.js.
  • Webpack funcționează în modul de producție

Puteți personaliza fiecare bucată de Webpack, desigur, atunci când aveți nevoie. Configurația Webpack este stocată în webpack.config.js , în folderul rădăcină al proiectului.

Punctul de intrare

În mod implicit, punctul de intrare este ./src/index.js Acest exemplu simplu folosește ./index.js fișier ca punct de plecare:

module.exports = {  /*...*/  entry: './index.js'  /*...*/}

Ieșirea

Implicit, ieșirea este generată în ./dist/main.js. Acest exemplu pune pachetul de ieșire în app.js:

module.exports = {  /*...*/  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'app.js'  }  /*...*/}

Utilizarea Webpack vă permite să utilizați import sau require declarații în codul dvs. JavaScript nu numai pentru a include alt JavaScript, ci orice fel de fișier (de exemplu, CSS).

Webpack își propune să gestioneze toate dependențele noastre, nu doar JavaScript, iar încărcătoarele sunt o modalitate de a face acest lucru.

De exemplu, în codul dvs. puteți utiliza:

import 'style.css'

utilizând această configurație a încărcătorului:

module.exports = {  /*...*/  module: {    rules: [      { test: /.css$/, use: 'css-loader' },    }]  }  /*...*/}

expresie uzuala vizează orice fișier CSS.

Un încărcător poate avea opțiuni:

module.exports = {  /*...*/  module: {    rules: [      {        test: /.css$/,        use: [          {            loader: 'css-loader',            options: {              modules: true            }          }        ]      }    ]  }  /*...*/}

Puteți solicita mai multe încărcătoare pentru fiecare regulă:

module.exports = {  /*...*/  module: {    rules: [      {        test: /.css$/,        use:          [            'style-loader',            'css-loader',          ]      }    ]  }  /*...*/}

În acest exemplu, css-loader interpretează import 'style.css' directivă în CSS. style-loader este apoi responsabil pentru injectarea acelui CSS în DOM, folosind un <style> tag.

Comanda contează și este inversată (ultima este executată mai întâi).

Ce fel de încărcătoare există? Mulți! Lista completă o puteți găsi aici.

Un încărcător folosit în mod obișnuit este Babel, care este folosit pentru a transpune JavaScript-ul modern în codul ES5:

module.exports = {  /*...*/  module: {    rules: [      {        test: /.js$/,        exclude: /(node_modules|bower_components)/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        }      }    ]  }  /*...*/}

Acest exemplu face ca Babel să preproceseze toate fișierele noastre React / JSX:

module.exports = {  /*...*/  module: {    rules: [      {        test: /.(js|jsx)$/,        exclude: /node_modules/,        use: 'babel-loader'      }    ]  },  resolve: {    extensions: [      '.js',      '.jsx'    ]  }  /*...*/}

A se vedea babel-loader Opțiuni aici.

Pluginuri

Pluginurile sunt ca încărcătoarele, dar pe steroizi. Pot face lucruri pe care încărcătoarele nu le pot face și sunt elementele principale ale Webpack.

Luați acest exemplu:

module.exports = {  /*...*/  plugins: [    new HTMLWebpackPlugin()  ]  /*...*/}

HTMLWebpackPlugin pluginul face treaba de a crea automat un fișier HTML și de a adăuga calea pachetului JS de ieșire, astfel încât JavaScript să fie gata să fie difuzat.

Sunt o mulțime de pluginuri disponibile.

Un plugin util, CleanWebpackPlugin, poate fi folosit pentru a șterge dist/ înainte de a crea orice ieșire, astfel încât să nu lăsați fișiere în jur când schimbați numele fișierelor de ieșire:

module.exports = {  /*...*/  plugins: [    new CleanWebpackPlugin(['dist']),  ]  /*...*/}

Modul Webpack

Acest mod (introdus în Webpack 4) setează mediul pe care funcționează Webpack. Poate fi setat la development sau production (implicit la producție, deci îl setați numai când treceți la dezvoltare).

module.exports = {  entry: './index.js',  mode: 'development',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'app.js'  }}

Mod de dezvoltare:

  • construiește foarte repede
  • este mai puțin optimizat decât producția
  • nu elimină comentariile
  • oferă mesaje de eroare și sugestii mai detaliate
  • oferă o experiență mai bună de depanare

Modul de producție este mai lent de construit, deoarece trebuie să genereze un pachet mai optimizat. Fișierul JavaScript rezultat are o dimensiune mai mică, deoarece elimină multe lucruri care nu sunt necesare în producție.

Am realizat un exemplu de aplicație care tipărește doar un console.log afirmație.

Iată pachetul de producție:

1611408369 876 Introducere pentru incepatori in Webpack

Iată pachetul de dezvoltare:

1611408369 779 Introducere pentru incepatori in Webpack

Rularea Webpack

Webpack poate fi rulat manual de pe linia de comandă dacă este instalat global. Dar, în general, scrieți un script în interiorul package.json fișier, care este apoi rulat folosind npm sau yarn.

De exemplu aceasta package.json definiția scripturilor pe care le-am folosit înainte:

"scripts": {  "build": "webpack"}

ne permite să alergăm webpack prin alergare

npm run build

sau

yarn run build

sau pur și simplu

yarn build

Vizionarea schimbărilor

Webpack poate reconstrui automat pachetul atunci când are loc o modificare a aplicației dvs. și continuă să asculte următoarea modificare.

Doar adăugați acest script:

"scripts": {  "watch": "webpack --watch"}

și fugi

npm run watch

sau

yarn run watch

sau pur și simplu

yarn watch

O caracteristică frumoasă a modului de ceas este că pachetul se schimbă numai dacă versiunea nu are erori. Dacă există erori, watch va continua să asculte modificările și va încerca să reconstruiască pachetul, dar pachetul actual care funcționează nu este afectat de acele versiuni problematice.

Manipularea imaginilor

Webpack vă permite să utilizați imagini într-un mod foarte convenabil, folosind file-loader încărcător.

Această configurație simplă:

module.exports = {  /*...*/  module: {    rules: [      {        test: /.(png|svg|jpg|gif)$/,        use: [          'file-loader'        ]      }    ]  }  /*...*/}

Vă permite să importați imagini în JavaScript:

import Icon from './icon.png'const img = new Image()img.src = Iconelement.appendChild(img)

Unde img este un element HTMLImageElement. Verificați Documente de imagine.

file-loader poate gestiona și alte tipuri de active, cum ar fi fonturi, fișiere CSV, XML și multe altele.

Un alt instrument frumos pentru a lucra cu imagini este url-loader încărcător.

Acest exemplu încarcă orice fișier PNG mai mic de 8 KB ca fișier adresa URL a datelor.

module.exports = {  /*...*/  module: {    rules: [      {        test: /.png$/,        use: [          {            loader: 'url-loader',            options: {              limit: 8192            }          }        ]      }    ]  }  /*...*/}

Procesați codul SASS și transformați-l în CSS

Folosind sass-loader, css-loader și style-loader:

module.exports = {  /*...*/  module: {    rules: [      {        test: /.scss$/,        use: [          'style-loader',          'css-loader',          'sass-loader'        ]      }    ]  }  /*...*/}

Generați hărți sursă

Deoarece Webpack include codul, Hărțile sursă sunt obligatorii pentru a obține o referință la fișierul original care a generat o eroare. De exemplu:

Spuneți Webpack să genereze hărți sursă folosind devtool proprietatea configurației:

module.exports = {  /*...*/  devtool: 'inline-source-map',  /*...*/}

devtool are multe valori posibile, cele mai utilizate probabil sunt:

  • none: nu adaugă hărți sursă
  • source-map: ideal pentru producție, oferă o hartă sursă separată care poate fi minimizată și adaugă o referință în pachet, astfel încât instrumentele de dezvoltare să știe că harta sursă este disponibilă. Desigur, ar trebui să configurați serverul pentru a evita livrarea acestuia și să-l utilizați doar în scopuri de depanare
  • inline-source-map: ideal pentru dezvoltare, înclină harta sursă ca adresă URL de date

Public 1 tutorial gratuit de programare pe zi pe flaviocopes.com, verifică!

Publicat inițial la flaviocopes.com.