Una introducció a Webpack: què és i com utilitzar-lo

Introducció

Estic bé, suposo que heu sentit a parlar de Webpack, per això sou aquí, oi? La veritable pregunta és, què en sabeu? Potser sabreu algunes coses sobre el seu funcionament o no en teniu ni idea. En qualsevol cas, puc assegurar-vos que després de llegir aquest article és probable que estigueu prou còmodes amb la situació global de les webpack.

Al cap i a la fi, la necessitat és la mare de la invenció ...

Una manera perfecta de dir per què hi ha un webpack és la cita anterior. Però per entendre-ho millor, hem de remuntar-nos a un moment en què JavaScript no era la nova cosa atractiva, quan un lloc web en temps antics era només un petit grup de bons .html, CSS i probablement un o un en alguns casos, només alguns fitxers JavaScript. Però ben aviat tot canviaria.

Quin era el problema?

Tota la comunitat de desenvolupadors s'ha esforçat constantment per millorar l'experiència general dels usuaris i desenvolupadors mitjançant l'ús i la creació d'aplicacions web / Javascript. Per tant, hem introduït moltes biblioteques i marcs nous.

Alguns patrons de disseny han evolucionat amb el pas del temps per proporcionar als desenvolupadors una forma millor, més potent, però molt fàcil d’escriure aplicacions complexes de JavaScript. Abans, els llocs web ja no eren només un petit paquet amb un nombre impar d’arxius. Van afirmar que la introducció de mòduls JavaScript esdevindria voluminosa perquè l'escriptura de trossos petits de codi encapsulats era la nova tendència. Tot plegat va donar lloc a una situació en què tot el paquet d'aplicacions contenia quatre o cinc vegades més de fitxers.

No només va ser un repte la mida global de l’aplicació, sinó que també hi havia un enorme desfasament en el tipus de codi que van escriure els desenvolupadors i el tipus de codi que els navegadors podien comprendre. Els desenvolupadors van haver de fer servir molts codis auxiliars anomenats polifillaments per garantir que els navegadors poguessin interpretar el codi en els seus paquets.

Es va crear un webpack per resoldre aquests problemes. Webpack és un agrupador de mòduls estàtics.

Com va ser la resposta de Webpack?

En resum, Webpack cerca el vostre paquet i crea el que es coneix com a diagrama de dependència, que consta de diversos mòduls que la vostra aplicació web ha de funcionar tal com s’esperava. Segons aquest diagrama, es crea un nou paquet que consta del nombre mínim de fitxers requerits, sovint només un fitxer bundle.js que es pot inserir fàcilment al fitxer HTML i utilitzar-lo per a l'aplicació.

A la següent part d’aquest article, us guiaré pas a pas per la configuració de la webpack. Al final, espero que entengueu els fonaments bàsics de webpack. Així que anem a fer aquest rodatge ...

Què estem construint?

Probablement heu sentit a parlar de ReactJS. Si coneixeu reactJS, probablement sabeu què és l'aplicació create-reaccion. Per aquells que no tingueu idea de què són aquestes dues coses, ReactJS és una biblioteca d’interès d’usuari que és de gran ajuda per crear interfícies d'interès intel·ligents complexes, i crear-reaccionar l’aplicació és una eina CLI per configurar o arrencar una placa de calor. Les configuracions -Dev responen per fer aplicacions.

Avui crearem una aplicació simple React, però sense la CLI de creació-reacció-aplicació. Espero que us sembli molt divertit. :)

Fase d’instal·lació

npm int

És així, com comencen gairebé totes les coses bones: simple simple npm init. Va a utilitzar VS Code, però puc utilitzar qualsevol editor de codi per començar.

Abans de fer això, assegureu-vos que teniu el nodeJS més recent i la versió més recent de npm instal·lada localment al vostre ordinador. Feu clic a cadascun d’aquests enllaços per obtenir més informació sobre el procés.

$ npm init

Es crea un paquet inicial i afegeix per a nosaltres un fitxer package.json. Aquí es mencionen totes les dependències necessàries per crear aquesta aplicació.

Per crear una aplicació simple React, necessitem dues biblioteques principals: React i ReactDOM. Afegim-los com a dependències a la nostra aplicació amb npm.

$ npm i respon-dom - guarda

A continuació, hem d’afegir el paquet web perquè puguem agrupar la nostra aplicació. No només necessitarem un paquet, sinó també una recàrrega en calent, que és possible a través del servidor de devies del Webpack.

$ npm i webpack webpack-dev-server webpack-cli - guardar - dev

--Save - dev indica que aquests mòduls només són dependències. Ara que treballem amb React, hem de tenir en compte que React utilitza classes ES6 i importa sentències que no poden ser enteses per tots els navegadors. Per garantir que el codi pot ser llegit per tots els navegadors, necessitem una eina com Babel per convertir el nostre codi en un codi normal de lectura per als navegadors.

$ npm i babel-core babel-loader @ babel / default-react @ babel / default-env html-webpack-plugin - save-dev

Doncs què puc dir, que va ser el nombre màxim d’instal·lacions que prometo En el cas de Babel, primer varem carregar la biblioteca bàsica de Babel, després el carregador i finalment 2 plugins o presets per treballar específicament amb React i tots els nous codis ES2015 i ES6.

Ara afegiu codi i comenceu a configurar el webpack.

Així és com hauria de tenir cura del fitxer package.json de totes les instal·lacions anteriors. Segons quan seguiu aquest article, és possible que tingueu un número de versió diferent.

El codi

Comencem per afegir un fitxer webpack.config.js a l’arrel de la nostra estructura d’aplicació. Enganxeu el codi següent al fitxer webpack.config.

const path = requereix ('ruta'); const HtmlWebpackPlugin = require ('html-webpack-plugin');
module.exports = {// Aquesta propietat defineix on comença l'aplicació Entrada: './ src / index.js',
// Aquesta propietat defineix la ruta del fitxer i el nom del fitxer que s'utilitza per proporcionar el fitxer agrupat. Sortida: {path: path.join (__ dirname, '/ dist'), nom del fitxer: 'bundle.js'},
// Configurar mòduls de càrrega: {Normes: [{Test: /\.js$/, exclou: / node_modules /, use: {loader: 'babel-loader'}}]},
// Configura el connector per utilitzar un fitxer HTML per proporcionar fitxers JS. Complements: [nou HtmlWebpackPlugin ({template: './src/index.html'})]}

D'acord, entenem les línies anteriors.

Primer, necessitem el mòdul de ruta per defecte per accedir a la ubicació del fitxer i fer canvis a la ubicació del fitxer.

A continuació, necessitarem el HTMLWebpackPlugin per generar un fitxer HTML que s'utilitzarà per proporcionar fitxers JavaScript agrupats. Per obtenir més informació sobre HTMLWebpackPlugin, feu clic a l’enllaç.

Després tenim l’objecte export.module amb algunes propietats. El primer és la propietat d'entrada, que especifica amb quin fitxer hauria de començar el webpack per construir el diagrama de dependència interna.

module.exports = {
entrada: './ src / index.js'
}

A continuació, la propietat de sortida especifica on s'ha de generar el fitxer agrupat i quin ha de ser el nom del fitxer agrupat. Això es fa a través de les propietats output.path i output.filename.

module.exports = {
// Aquesta propietat defineix la ruta del fitxer i el nom del fitxer que s'utilitza per proporcionar el fitxer agrupat. Sortida: {path: path.join (__ dirname, '/ dist'), nom del fitxer: 'bundle.js'},
}

Al costat, hi ha els carregadors. Això especifica què hauria de fer el webpack per a un tipus de fitxer determinat. Recordeu que el webpack fora de caixa només entén JavaScript i JSON. Tanmateix, si s’utilitza un idioma diferent en el vostre projecte, podeu especificar aquí què hauria de passar amb aquest nou idioma.

module.exports = {
// Configura programes de càrrega Mòdul: {Normes: [{Test: /\.js$/, exclou: / node_modules /, use: {loader: 'babel-loader'}}]}
}

La informació s'ha de proporcionar en un objecte per a cada propietat del mòdul, que també conté un conjunt de regles. Hi haurà un objecte per a cada cas. També he indicat que tot el que hi ha a la carpeta node_modules s'ha d'excloure.

A continuació es mostra la propietat del complement. Això s’utilitza per estendre la funcionalitat de Webpack. Abans que un plugin es pugui utilitzar a la matriu de complements dins de l'objecte d'exportació del mòdul, necessitareu el mateix.

module.exports = {
// Configura el connector per utilitzar un fitxer HTML per proporcionar fitxers JS. Complements: [nou HtmlWebpackPlugin ({template: './src/index.html'})]
}

Com ja s’ha explicat, aquest complement especial utilitza el fitxer especificat a la nostra carpeta src. A continuació, s'utilitza com a plantilla per al nostre fitxer HTML, en la qual s'insereixen automàticament tots els fitxers agrupats. Hi podem utilitzar molts altres plugins. Podeu trobar més informació al lloc web oficial.

Finalment, hem de crear un fitxer .babelrc per utilitzar la configuració predefinida babel que hem instal·lat i tenir en compte les classes ES6 i les instruccions d’importació del nostre codi. Afegiu les línies de codi següents al fitxer .babelrc.

{"Preferències": ["env", "respond"]}

I això és exactament com ara babel pot utilitzar aquests presets. Està bé, prou amb la configuració: afegim un codi de reacció per veure com funciona.

Codi respon

Com que el punt de partida de l’aplicació és el fitxer index.js de la carpeta src, comencem amb aquest. En aquest cas, primer necessitem React i ReactDOM. Enganxeu el codi següent al fitxer index.js.

importar reaccionar de "reaccionar"; importar ReactDOM de "reac-dom"; Importa l'aplicació des de "./Components/App";
Reacciona ReactDOM. ( , document.getElementById ('aplicació'));

Així que només importem un altre fitxer de la nostra carpeta de components que creeu i afegim un altre fitxer a la carpeta anomenada App.js. Analitzem què hi ha al fitxer App.js:

importa React, {Component} de "reaccionar"
L'aplicació de classe amplia el component {render () {return Configuració de reacció Webpack + )}}
Exporta l'aplicació estàndard;

Gairebé estem acabats. Ara només cal que activeu la recàrrega durant el funcionament. Això vol dir que el navegador torna a carregar la pàgina cada vegada que es detecta un canvi i té la capacitat de construir i agrupar tota l’aplicació si ho fa.

Per fer-ho, afegim valors de script al fitxer package.json. Elimineu la propietat de prova de l’objecte de scripts del fitxer package.json i afegiu aquests dos scripts:

"start": "webpack-dev-server - desenvolupament del mòdul --open --hot",
"build": "webpack - modificació de la producció"

Ja heu acabat! Aneu al vostre terminal, aneu a la carpeta arrel i executeu npm start. Hauria d’iniciar un servidor de desenvolupadors al vostre ordinador i proporcionar el fitxer HTML al vostre navegador. Si feu canvis importants o importants i deseu el codi, el navegador s’actualitzarà automàticament per mostrar els darrers canvis.

Un cop creieu que esteu preparat per agrupar l’aplicació, tot el que heu de fer és prémer l’ordre npm build i Webpack crearà un paquet optimitzat a la vostra carpeta del projecte que es pot desplegar a qualsevol servidor web.

Conclusió

Es tracta només d’una petita aplicació o cas d’ús de Webpack i Babel, però les aplicacions són il·limitades. Espero que estiguis prou emocionat per explorar més maneres i maneres de treballar amb Webpack i Babel. Visiteu els llocs web oficials per obtenir més informació i llegir-ne els detalls.

Vaig crear un dipòsit de github amb tot el codi que conté. Si teniu cap pregunta, poseu-vos en contacte amb el repositori.

Els meus dos cèntims via webpack? De vegades es pot pensar que sigui només una eina i, per què s’hauria de preocupar massa d’una eina? Però creieu-me quan dic que: La lluita inicial per aprendre el webpack us estalvia una quantitat enorme d’hores que d’altra manera invertiríeu en desenvolupar sense el webpack.

Esperem poder publicar un article interessant de nou aviat. Espero que us hagi agradat llegir aquest llibre!

Si teniu problemes o problemes mentre feu els passos / processos anteriors, no dubteu en contactar-nos i deixar comentaris.

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: https://twitter.com/ashishnandansin