Documentul discută despre provocările și soluțiile din dezvoltarea frontend-ului, evidențiind necesitatea automatizării folosind instrumente precum webpack. Detaliază funcționalitățile webpack-ului, inclusiv gestionarea modulelor, configurarea punctelor de intrare și de ieșire, utilizarea încărcătoarelor și plugin-urilor pentru a optimiza codul. În cele din urmă, oferă exemple de utilizare și strategii pentru îmbunătățirea procesului de dezvoltare, inclusiv monitorizarea modificărilor și optimizarea performanțelor.

1. Automatizarea asamblării
frontend-lui.

2. Lumea modernă a dezvoltării web ne
deschide atât oportunități incredibile, cât și
probleme.
Pe scară pot fi împărțite în două:
• Problemele globale
• Problemele locale

3. Probleme globale
 Decuplarea deciziilor. HTML5 și JavaScript sunt soluții
revoluționare care sunt create aproape în fiecare zi. Fiecare
are propriile particularități, avantaje și dezavantaje.
Toate acestea sunt concepute pentru a rezolva o mică, de fapt, o serie
de sarcini:
• jQuery, Knockout, Angular, Marionette, React - dacă dai
peste detalii, toate acestea sunt create pentru a rezolva
aceleași probleme.
• Underscore, lodash, Lazy, ES6 - în multe feluri, pentru a
lucra cu date.
• MVC, MVVM, Flux - chiar și modele arhitecturale sunt create
pentru a rezolva o sarcină.

4. Varietate de versiuni de mărire mărește
amploarea problemei:
• Un plugin necesită jQuery 1.8, jQuery 2.1.
• Angular 1.3 și Angular 2+ sunt aproape
complet diferite.
• Bootstrap 2.3 și Bootstrap 3.1 -
componentele create pentru o versiune nu
vor fi lăsate afară din cutie pentru alta.

5. Formate pentru preprocesare (aici, de
asemenea, containere), de exemplu:
• LESS, SCSS, SASS, Stylus — pentru stiluri.
• Handlebars, jade, EJS — pentru șabloane.
• JSON, JSON5, PJSON, XML — pentru date.
• CoffeeScript, JSX, ES6 — scripturi, etc

6. Probleme locale
 Complexitatea creșterii proiectului :
• Funcțional - creați un prototip, adăugați o
secțiune, faceți o formă, legați secțiunile
între ele, etc.
• Tehnologic - accesați Bootstrap, conectați
Leaflet, implementați React, etc.

7. Gestionarea dependenței.
Atunci când în proiect apar cel puțin 3
scripturi, începe să jonglezi - trebuie să
gândești întotdeauna:
• Sunt încărcate bibliotecile?
• Și stilurile necesare?
• Cum rămâne cu șabloanele?
Versionare

8. Solutii
Soluția cea mai optimă este ruperea codului
în module izolate. Din punct de vedere
istoric, au existat două abordări: AMD și
CommonJS.

9. Soluții populare
• AMD (Asynchronous Module Definition)
Se reduce la definiția modulului prin define ()
și apel prin require ()
• CommonJS
Nativ implementat pe server-side JavaScript
în Node.js / Rhino. Reducerea la definirea
unui modul printr-o variabilă globală și un
apel prin necesită ()

10. • Grunt
• Gulp
• Browserify
• SystemJS
• Brunch
• Rollup
• Flipbox

11. Webpack
Webpack — este un constructor de module
pentru aplicațiile JavaScript moderne.
Când webpack-ul procesează aplicația dvs.,
acesta creează în mod recursiv un graf de
dependență, care include toate modulele
solicitate de aplicație, apoi pachete toate
aceste module într-un număr specificat de
fișiere - adesea doar unul - pentru
încărcarea browserului.

13. La nivel global, există două strategii pentru
utilizarea webpack-ului
 prin consola (potrivită pentru proiecte mici);
 prin script-ul ca un modul Node.js.
În ambele cazuri, avem nevoie Node.js si npm.

14. Utilizarea consolei
Pentru experiment, creați directorul src și
dispuneți de un script index.js :
console.log('Hello Habrahabr!');
Dosarul de assets va conține fișierele noastre de
ieșire (scripturi, stiluri, imagini folosite de ele).
Acestea sunt aceleași fișiere pe care le putem
pune pe serverul nostru web, pe CDN etc.

15. Utilizarea consolei
Pentru a face acest lucru, trebuie să
instalăm webpack la nivel global:
npm install webpack –g
Adunarea este efectuată de comandă:
webpack src/index.js assets/bundle.js

16. Использование в качестве модуля
Это наиболее подходящая стратегия для
средних и крупных проектов. В директории
проекта создаём package.json. Это можно
сделать командой:
npm init
Добавляем в проект модуль webpack:
npm install webpack --save-dev

17. Pentru a construi proiectul, vom crea
scriptul Node.js. De exemplu, build.js:

18. În ambele cazuri, vom obține directorul de
active și bundle.js în acesta este fișierul
nostru colectat, care conține index.js în sine
și toate dependențele pe care le conectează.
Este suficient să conectați numai acest fișier:
Rulați ansamblul : node build

20. Webpack este incredibil de flexibil în
configurație, cu toate acestea, pentru
început, este suficient să înțelegem patru
concepte de bază:
• entry (punctul de intrare),
• output (iesire),
• loaders (încarcatoare),
• plugins (pluginuri).

21. Punct de intrare(Entry)
Webpack creează un grafic al tuturor dependențelor aplicației.
Primul element al graficului este cunoscut ca punct de intrare.
Punctul de intrare specifică webpack-ul, de unde să începeți
să construiți graficul de dependență pentru a afla ce să
conectați. Puteți specifica un punct de intrare ca cale către
fișierul care lansează aplicația.
Într-un WebPack, punctele de intrare sunt declarate în proprietatea de
intrare a obiectului de configurare.

22. entry: {
"site": "./site",
"admin": "./admin“
}

23. Iesiri (Output)
• După ce compilați și
îmbinați toate
ansamblurile dvs.,
trebuie să spuneți în
continuare webpack
unde va fi amplasat
ansamblul.
Proprietatea de ieșire
indică WebPack
modul de procesare
a fișierelor de
asamblare rezultate.

24. output: { path:
require("path").resolve("./public/_/"),
publicPath: "/assets/", filename: "[name].js",
chunkFilename: "[id].chunk.js"}

25. • Încărcători (Loaders)
Scopul este să vă asigurați că toate
ansamblurile din proiectul dvs. sunt
convertite prin intermediul pachetului web
(deși acest lucru nu înseamnă că acestea
ar trebui să fie combinate). Webpack
tratează fiecare fișier (.css, .html, .scss,
.jpg, etc.) ca modul. Cu toate acestea,
webpack-ul însuși "înțelege" numai
JavaScript.

26. Încărcătoare au
nevoie de webpack
pentru două lucruri:
• Determinați ce fișier
este procesat de
către care încărcător
(proprietatea de test)
• Conversia acestor
fișiere astfel încât
acestea să poată fi
adăugate la graficul
de dependență (și, în
cele din urmă, la
asamblare) (folosiți
proprietatea)

27. • conversia datelor dintr-un format în altul;
• pot adăuga alte module pe ambalaj;
• ca regulă, să facă o transformare;
• lucrați cu un singur modul.

28. • Pluginuri (Plugins)
În timp ce încărcătorii efectuează numai
transformări bazate pe fișiere, plug-in-urile
sunt mai des folosite pentru a efectua
acțiuni și conversii definite de utilizator la
timpul de compilare sau părți ale
ansamblului dvs. (și multe altele!).
Webpack are un sistem foarte puternic și
flexibil de conectare.

29. • au acces la toate modulele (înainte și după
transformare);
• pot adăuga propriile module la pachet (de
exemplu, "runtime");
• să aibă acces la toate resursele create după
ambalare;
• sunt folosite pentru a schimba configurația
ansamblului, a optimiza, a adăuga unele
obiecte la module, resurse de actualizare
fierbinte.

30. • webpack.optimize.UglifyJsPlugin —
minimizarea codului folosind UglifyJS
Toate minifactoarele moderne funcționează
după cum urmează:
• Dezasamblează codul JavaScript în
arborele de sintaxă. (la fel, procedează
orice interpretator JavaScript )
• Parcurg arborele, îl analizează și-l
optimizează
• Înscriu într-un arbore sintactic codul
căpătat.

32. • webpack.optimize.DedupePlugin —
eliminarea modulelor duplicate.
Dacă, de exemplu, folosiți bibliotecile
Node.js terțe părți, atunci cel mai probabil,
modulele pe care le utilizează pot fi
duplicate.
Acest plugin găsește module duplicate și le
șterge. Acest lucru nu afectează
stabilitatea codului, dar poate reduce
semnificativ dimensiunea fișierului
colectat.

33. • ExtractTextPlugin vă permite să extrageți
conținutul tuturor fișierelor CSS conectate
într-un singur fișier CSS separat. Acest
lucru vă permite să accelerați
descărcarea, deoarece CSS este încărcat
în mod asincron (paralel cu fișierele JS).
Se recomandă utilizarea cu un număr
mare de stiluri.

34. • Webpack-dev-server lucrează “în memorie”
(“server running in-memory”) — creează
fișiere compilate în directorul de proiect.
• “Hot Module Replacement (HMR)” — vă
permite să actualizați module individuale
ale paginii, fără să o restartați complet.
Puterea completă poate fi experimentată
atunci când este utilizată cu React.

35. Server local pentru verificarea
funcționării Webpack
server local pentru a
vedea rezultatul
activității Webpack în
browser. Acest plug-
in se numește "nod-
static" și nu are nimic
de a face direct cu
Webpack. Este doar
un instrument util
pentru anumite
cazuri.
{
"scripts": {
"start": "webpack",
"serv": "static build"
},
"devDependencies": {
"html-webpack-plugin": "^2.28.0",
"node-static": "^0.7.9",
"webpack": "^2.2.1"
}
}

36. Webpack —watch
Webpack poate
monitoriza modificările
fișierelor și poate
reconstrui automat
pachetul (un fișier
javascript care se
conectează ca punct
de intrare). Pentru a
face acest lucru,
adăugați cuvântul
cheie "-watch" la
scriptul npm.
package.json
"scripts": {
"start": "webpack --watch",
"serv": "static build"
},

37. Performanțe generale Webpack
Lista de verificare a dezvoltării
• webpack-dev-server (WDS) - Automatic
Browser Refresh
• Hot Module Replacement (HMR) – Appendix
covers the topic in detail
• Linting is a technique that allows you to detect
code related issue through static analysis.

38. Styling
• ExtractTextPlugin - Separating CSS chapter
covers how to achieve this
• Autoprefixing - Autoprefixing chapter shows how
to do this
• The Eliminating Unused CSS - chapter explains the
basic idea of this technique

39. Assets
• Loading Images
• Loading Fonts
• Minifying

40. Caching
• Splitting Bundles - Adding Hashes to Filenames
• Code Splitting - Dynamic Loading
• Adding Hashes to Filenames - Separating
Manifest

41. Optimization
• Use ES6 module definition to leverage tree
shaking
• Environment Variables
• Environment Variables
• Web Workers

42. Output
• Tidying Up
• Authoring Packages

43. Sarcina
1. De instalat https://github.com/vuejs-
templates/webpack
2. Descrieți structura fisierului de configurare
WebPack
3. Ce plugin-uri Webpack sunt instalate?
4. Ce scripturi npm sunt descrise ?
5. Cum este realizată sincronizarea cu browser-lui în
timpul dezvoltării?
6...

44. • https://loftblog.ru/material/1-vvedenie-v-
webpack-2/
• http://leanpub.com/survivejs-webpack