Scurt tutorial de webpack

Tool-urile de build au ajuns sa fie o parte foarte importanta a dezvoltarii web, unul dintre motive fiind complixitatea din ce in ce mai mare a aplicatiilor JavaScript. Bundler-urile ne permit sa "impachetam", compilam si sa organizam asset-urile si librariile necesare unei aplicatii web.

In acest articol ne vom uita la webpack, un bundler si preprocesor open-source  ce poate face o varietate mare de lucruri. O sa vedem cum putem scrie module, cod de bundle si cum putem folosi plugin-uri.

De ce webpack?

Pentru ca suntem in web, nu exista un standard referitor la tool-ul de build folosit. Acum, dezvoltatorii au de ales intre tool-uri precum webpack, Gulp, Browserify, NPM Scripts, Grunt si multe altele. Sigur, putem compara toate aceste tool-uri si s-au scris o multime de astfel de articole, dar la final si preferinta personala are un cuvant de spus.

Am sa scriu aici o lista de argumente pro si contra webpack:

Pro:

- Functioneaza foarte bine cu aplicatii de tip Single Page Application
- Accepta atat require() cat si import
- Poti face code splitting avansat
- Hot Reload

Con:
- Nu-i chiar usor de inteles pentru incepatori
- Lucrul cu CSS, imagini sau alte fisiere non-JS poate fi putin mai greu la inceput
- Documentatia ar putea fi mai buna

Instalarea

Cel mai usor mod de a instala webpack este cu ajutorul unui manager de pachete. In acest tutorial o sa folosim npm dar la fel de usor puteti folosi si Yarn sau altceva. In ambele cazuri veti avea nevoie de Node.js instalat pe masina.

Eu prefer sa il instalez local, fara tag-ul -g. Astfel ma asigur ca oricine mai lucreaza pe acelasi proiect ca mine are aceasi versiune.

npm install webpack --save-dev

Dupa ce am rulat comanda de mai sus in folder-ul in care vrem sa ne incepem proiectul. Acum, hai sa ne definim scripturile de rulare in package.json:

"scripts": {
	"build": "webpack -p",
	"watch": "webpack --watch"
},

Acum, daca rulam npm run build din terminal webpack ne se va ocupa de bundle-uirea fisierelor noastre (tag-ul -p vine de la production si ne va minifica fisierele). Daca rulam npm run watch pornim un proces ce va urmari modificarile din fisierele nastre si va porni la fiecare modificare.

Acum, trebuie sa ii spunem de ce fisiere trebuie sa se ocupe, iar cel mai bine facem asta cu un fisier de config.

Fisierul de config

Acum o sa facem un fisier de config, desi o sa para relativ simplu, acest config poate face mult mai multe chestii.

In folder-ul proiectului tau trebuie sa faci in fisier webpack.config.js cu urmatoarele:

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Daca ne uitam in module.exports observam cheita entry, care ii spune webpack-ului care este fisierul js principal al proiectului nostru. bineinteles, exista mai multe strategii pentru definirea entry point-urilor, dar in masjoritatea cazurilor un singur entry point este suficient.

Apoi avem cheita output, in ii specificam numele si calea catre bundle-ul pe care trebuie sa il genereze. Acest bundle.js este singurul fisier javascript pe care il vom folosi in HTML:

<script src="./dist/bundle.js"></script>

Module webpack

Webpack ne permite sa lucram in mai multe moduri cu modulele, dar de cele mai multe ori esti liber sa le folosesti cum vrei.

Acum, hai sa adaugam un modul care sa salute utilizatorii. O sa facem un fisier greeter.js si o sa il exportam intr-o functie:

function greet() {
	console.log("Salutare si bun venit pe invata-programare.ro");
}

export default greet;

Acum, pentru a il folosi trebuie sa il importam in entrypoint, care va fi in /assets/js/index.js

import greet from './greeter.js';

console.log("I'm the entry point");
greet();

Acum, daca rulam npm run build si deschidem fisierul HTML in browser o sa vedem in consola aceste mesaje:

Entry point-ul nostru si fisierul greeter.js au fost compilate intr-un singur fisier numit bundle.js care in cele din urma a ajuns sa fie executat de browser:

Folosirea librariilor

Acum, hai sa presupunem ca atunci cand saluam un utilizator vrem sa ii aratam si ce zi a saptamani este. Pentru a face acest lucru o sa folosim o librarie numita moment.js

Prima data trebuie sa instalam libraria folosind npm:

npm install moment --save

Apoi, in fisierul creat mai devreme, greeter.js importam libraria si o folosim:

import moment from 'moment';

function greet() {
    var day = moment().format('dddd');
    console.log('Have a great ' + day + '!');
};

export default greet;

Dupa ce rulam npm run build o sa vedem urmatorul lucru in consola:

Loaders

Acesta este modul webpack-ului de a executa diverse actiuni in timpul bundleing-ului sau pre/post proceseze fisierele. De exemplu, poate compila TypeScript, sa incarce componente de Vue.js, sa randeze template-uri si multe altele.
Majoritatea loaderelor sunt scrise de comunitate, dar daca vreti o lista cu cele mai populare o gasiti aici.

Presupunand ca vrem sa folosim un linter in proiectul nostru pentru a verifica daca avem erori. Putem folosi JSHint loader.

Prima data trebuie sa instalam JSHint si JSHint loader:

npm install jshint jshint-loader --save-dev

Dupa ce am rulat aceasta comanda trebuie sa modificam fisierul config, unde vom initializa loader-ul si ii vom spune al ce fisiere sa se uite:

var path = require('path');

module.exports = {
	entry: './assets/js/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	// Aici adaugam JSHint loader
	module: {
		rules: [{
			test: /\.js$/, // vrem sa rulam loader-ul pe toate fisierele .js
			exclude: /node_modules/, // vrem sa ignoram toate fisierele din folder-ul node_modules
			use: 'jshint-loader'
		}]
	}
};

Acum, daca rulam npm run build o sa o lista de warning-uri (pe care le vom ignora pentru moment):

Acum, codul nostru va merge astfel:

Concluzii

Ne vom opri aici cu acest tutorial, oricum tutorialul acesta este deja prea mare. Dar, daca vreti sa aflati mai multe despre webpack am sa va las o lista de recomandari cu resurse ce va vor ajuta.

-   webpack.js.org
-   Awesome webpack
-   Webpack 2 - A full tutorial
-  Webpack Examples