Share
În tutorialul anterior am învățat cum să configuram un proiect Webpack și cum să folosim încărcătoare pentru a procesa JavaScript. În cazul în care Webpack strălucește într-adevăr, este în capacitatea sa de a lega alte tipuri de active statice, cum ar fi CSS și imagini, și să le includă în proiectul nostru numai atunci când sunt necesare. Să începem prin adăugarea unor stiluri la pagina noastră.
Mai întâi, creați un fișier CSS normal într-un director de stiluri. Sună main.css și adăugați o regulă de stil pentru elementul de titlu.
h2 fundal: albastru; culoare: galben;
Deci, cum obținem această pagină de stil pe pagina noastră? Ca și cele mai multe lucruri cu Webpack, vom avea nevoie de un alt încărcător. Două în fapt: css-loader și stil-loader. Primul citește toate stilurile din fișierele noastre CSS, în timp ce cealaltă injectează aceste stiluri în pagina HTML. Instalați-le astfel:
npm instalează încărcătorul de stil css-loader
Apoi, îi spunem Webpack cum să le folosească. În webpack.config.js, trebuie să adăugăm un alt obiect la matricea de încărcătoare. În acesta, dorim să adăugăm un test pentru a se potrivi numai cu fișierele CSS, precum și pentru a specifica ce încărcătoare să utilizeze.
test: /\.css$/, exclude: / node_modules /, loader: 'style! css'
Partea interesantă a acestui fragment de cod este 'Stil! Css' linia. Încărcătoarele sunt citite de la dreapta la stânga, astfel încât Webpack este primul care citește stilurile unui fișier care se termină .css, și apoi injectați aceste stiluri în pagina noastră.
Deoarece am actualizat fișierul de configurare, va trebui să reporniți serverul de dezvoltare pentru ca modificările noastre să fie preluate. Utilizare ctrl + c pentru a opri serverul și WebPACK-dev-server pentru ao porni din nou.
Tot ce trebuie să facem acum este să cerem foaia de stil din interiorul nostru main.js fişier. Facem acest lucru la fel ca orice alt modul JavaScript:
Accentsconagua
const sayHello = cere ('./ say-hello'); necesită (“./ stiluri / main.css'); spune Hello ("Guybrush", document.querySelector ('h2'));Rețineți cum nu am atins nici măcar index.html. Deschideți browserul pentru a vedea pagina cu stil h2. Schimbați culoarea titlului în foaia de stil pentru a vedea instantaneu actualizarea fără o reîmprospătare. Minunat.
"Dar nimeni nu folosește CSS în aceste zile, Grandad! E vorba de Sass". Desigur ca este. Din fericire, Webpack are un încărcător pentru a face exact lucrul. Instalați-l împreună cu versiunea nod a lui Sass folosind:
npm instalați sass-loader node-sass
Apoi actualizați webpack.config.js:
test: /\.scss$/, exclude: / node_modules /, încărcător: 'style! css! sass'
Acest lucru spune acum că pentru orice fișier care se termină cu .SCSS, convertiți Sass la CSS simplu, citiți stilurile din CSS și apoi inserați stilurile în pagină. Nu uitați să redenumiți main.css la main.scss, și necesită în schimb noul fișier numit. Mai întâi niște Sass:
$ fundal: albastru; h2 fundal: $ background; culoare: galben;
Apoi main.js:
necesită (“./ stiluri / main.scss');
Super. Este la fel de ușor ca asta. Fără conversii și salvarea fișierelor, sau chiar vizionarea dosarelor. Avem nevoie doar de stilurile noastre Sass direct.
"Deci, pariez și imagini, încărcătoare?" Desigur! Cu imaginile, dorim să folosim încărcătorul url. Acest încărcător are adresa URL relativă a imaginii dvs. și actualizează calea astfel încât să fie corect inclusă în pachetul de fișiere. Ca de obicei:
npm instala url-loader
Acum, să încercăm ceva diferit în nostru webpack.config.js. Adăugați o altă intrare în matricea încărcătorilor în mod obișnuit, dar de această dată dorim ca expresia obișnuită să se potrivească cu imagini cu extensii de fișiere diferite:
test: /\.(jpg|png|gif)$/, include: / images /, loader: 'url'
Observați diferența de aici. Nu folosim exclude cheie. În schimb, folosim include. Acest lucru este mai eficient, deoarece spune webpack-ului să ignore tot ceea ce nu se potrivește cu un dosar numit "imagini".
De obicei, veți folosi un fel de sistem de template pentru a crea vizualizările dvs. HTML, dar o vom păstra la bază și vom crea o etichetă de imagine în JavaScript cu modă veche. Mai întâi creați un element de imagine, setați imaginea cerută la atributul src și apoi adăugați elementul în pagină.
var imgElement = document.createElement ("img"); imgElement.src = necesită ('./ images / my-image.jpg'); document.body.appendChild (imgElement);Întoarceți-vă la browser-ul dvs. pentru a vedea imaginea dvs. să apară în ochii dvs.!
O altă sarcină care se desfășoară în mod obișnuit în timpul dezvoltării este lingerea. Linting este o modalitate de a căuta erori potențiale în codul dvs., împreună cu verificarea faptului că ați urmat anumite convenții de codare. Lucrurile pe care poate doriți să le căutați sunt: "Am folosit o variabilă fără să o declar mai întâi?" sau "Am uitat un punct și virgulă la sfârșitul unei linii?" Prin punerea în aplicare a acestor reguli, putem distruge bug-uri proaste de la începutul anului.
Un instrument popular pentru scame este JSHint. Aceasta privește codul nostru și subliniază potențialele erori pe care le-am făcut. JSHint poate fi rulat manual la linia de comandă, dar aceasta devine repede o operă în timpul dezvoltării. În mod ideal, ne-ar plăcea să se execute automat de fiecare dată când salvăm un fișier. Serverul nostru Webpack se ocupă deja de schimbări, deci da, l-ați ghicit - un alt încărcător.
Instalați încărcătorul jshint în mod obișnuit:
npm instalează jshint-loader
Din nou, trebuie să-i spunem Webpack să o folosească adăugând-o la noi webpack.config.js. Cu toate acestea, acest încărcător este ușor diferit. Nu transformă nici un cod - este doar că are o privire. De asemenea, nu vrem ca toți încărcătoarele noastre mai grele de modificare a codului să ruleze și să nu reușească doar pentru că am uitat o punct și virgulă. Aici intră preloaderii. Un preloader este orice încărcător pe care îl specificăm pentru a se executa înainte de sarcinile principale. Se adaugă la noi webpack.conf.js în mod similar cu încărcătoarele.
modul: preloaders: [test: /\.js$/, exclude: / node_modules /, încărcător: 'jshint'], încărcătoare: [...]
Acum, procesul nostru de linting rulează și nu reușește imediat dacă există o problemă detectată. Înainte de a ne reporni serverul web, trebuie să-i spunem lui JSHint că folosim ES6, altfel acesta va eșua când va vedea const cuvântul cheie pe care îl folosim.
După tasta modulului din configurația noastră, adăugați o altă intrare numită "jshint" și o linie pentru a specifica versiunea JavaScript.
modul: preLoaders: [...], încărcătoare: [...], jshint: esversion: 6
Salvați fișierul și reporniți-l WebPACK-dev-server. Rularea bine? Grozav. Aceasta înseamnă că codul dvs. nu conține erori. Să introducem una prin eliminarea punct și virgulă din această linie:
var imgElement = document.createElement ('img')Din nou, salvați fișierul și examinați terminalul. Acum obținem acest lucru:
AVERTISMENT în ./main.js jshint duce la erori Lipsește punct și virgulă. @ line 7 char 47
Mulțumesc, JSHint!
Acum, că suntem fericiți că codul nostru este în formă și că face tot ceea ce vrem, trebuie să îl pregătim pentru lumea reală. Unul dintre cele mai obișnuite lucruri de făcut atunci când puneți codul în direct este să îl minifiți, să concatenați toate fișierele într-unul și apoi să comprimați acest lucru în cel mai mic fișier posibil. Înainte de a continua, aruncați o privire asupra curentului bundle.js. Este ușor de citit, are o mulțime de spații libere și are o dimensiune de 32kb.
- Nu-mi spuneți, un alt încărcător, nu-i așa? Nope! În această ocazie rară, nu avem nevoie de un încărcător. Webpack are minime construit chiar înăuntru. Odată ce sunteți mulțumit cu codul dvs., pur și simplu rulați această comandă:
webpack -p
-p steagul spune Webpack să primească codul nostru pentru producție. Pe măsură ce generează pachetul, acesta optimizează cât de mult poate. După ce executați această comandă, deschideți-o bundle.js și veți vedea că totul a fost răsturnat împreună și că chiar și cu o cantitate atât de mică de cod am salvat 10kb.
Sper că acest tutorial din două părți ți-a dat suficientă încredere pentru a utiliza Webpack în propriile proiecte. Amintiți-vă, dacă există ceva ce doriți să faceți în procesul dvs. de construire, este foarte probabil că Webpack are un încărcător pentru el. Toate încărcătoarele sunt instalate prin npm, deci aruncați o privire acolo pentru a vedea dacă cineva a făcut deja ceea ce aveți nevoie.
A se distra!
