Webpack è un'utilità che può raggruppare i tuoi file JavaScript. Ciò ti consente di essere più organizzato e produttivo e consente anche l'uso di linguaggi preelaborati come SASS e TypeScript.
A cosa serve Webpack?
Immagina di aver lavorato su un sito web con un sacco di JavaScript personalizzato. Sei stato su questo progetto per un po' e le cose sono rapidamente sfuggite di mano. Il tuo index.html ha 20 diversi <script> tagga tutti i file di provenienza diversi; alcuni sono tuoi, altri sono risorse esterne da cui dipendi. La gestione di questi è un problema, soprattutto a causa del modo in cui la maggior parte dei browser gestisce il caricamento di JavaScript. Come ti assicuri che il tuo codice venga eseguito dopo il caricamento di jQuery? Di solito, metti jQuery fisicamente prima nell'HTML, ma questo è un problema da gestire per molte discrepanze.
C'è anche il problema delle prestazioni. Ogni file di script deve essere caricato separatamente. E per peggiorare le cose, la maggior parte di JavaScript blocca il rendering, il che significa che il tuo sito Web non verrà nemmeno visualizzato fino al termine del download, dell'analisi e dell'esecuzione del JavaScript. Puoi vederlo in azione nella scheda Rete da Strumenti di sviluppo di Chrome, che mostra le richieste inviate. Più richieste fai, più tempo ci vorrà per completarle tutte.
La soluzione qui è il raggruppamento. Invece di collegarti a risorse esterne, dovresti scaricarle tutte localmente e includerle come dipendenze del tuo codice. Webpack raggruppa tutto in un unico file main.js che contiene tutto ciò di cui il tuo sito ha bisogno. Dovresti quindi includere semplicemente quel file JavaScript e eliminare tutti gli altri <script> tag.
Questo ti consente di dividere il codice in più file senza doversi preoccupare di problemi di concorrenza, problemi di spazio dei nomi o tempi di caricamento del sito. Webpack inoltre comprime e minimizza il codice di produzione per risparmiare ancora più spazio.
Webpack ti aiuta a organizzare le risorse del tuo sito
In breve, Webpack ti consente di utilizzare la funzione require() per includere un JavaScript file in un altro. Questo non è supportato in nessun browser, poiché è qualcosa che deve essere eseguito da un bundler JavaScript come Webpack, Gulp o Browserify prima di inviarlo al client. Può essere qualcosa di semplice, come importare una dipendenza da npm:
var axios = require('axios') //node_modules/axios/index.js
O qualcosa di più complicato, come l'utilizzo di immagini in JavaScript:
<img src={ require('../../assets/logo.png') } /> Annuncio
In entrambi i casi, la stringa nella funzione require viene passata ai caricatori di Webpack. Questo è ciò che definisce il modo in cui Webpack elabora i file. Ad esempio, potremmo utilizzare il file-loader per gestire le immagini:
{ test: /.(png|jpe?g|gif)$/, use: [ { loader: 'file-loader', options: { }, }, ], }
Se l'espressione regolare in test corrisponde al nome del file, viene utilizzato il caricatore. In questo caso, il file-loader genererebbe un URL in base alla tua configurazione in base a dove è finito il file. Ora, quando creiamo i nostri file, il tag img avrà un aspetto più simile a:
<img src={ 'https://cdn.yourwebsite.com/img/341234/logo.png' } />
Ciò ti consente di avere una struttura di file molto organizzata, poiché non devi più preoccuparti delle posizioni dei file e aggiungere più <script> e <link> tag. Non è raro—specialmente con framework come React—avere progetti che assomigliano a questo:
src/|_styles/| |_global.css | |_darkTheme.css |_components/| |_stili/| | |_buttonStyles.css | |_button.js |_containers/| |_homepage.js | |_users.js |_index.js |_app.js |_package.json
Invece di avere un index.js lungo 2000 righe. Ciò rende lo sviluppo molto più semplice a lungo termine, con un investimento di tempo all'inizio per la transizione a un ambiente basato su Webpack.
Webpack consente Usare i preprocessori
Poiché tutto ciò che Webpack fa è passare l'elaborazione dei file ai caricatori, in quei caricatori può accadere molta magia. Ti ritroverai con quello che viene chiamato un preprocessore, che può aggiungere funzionalità alla lingua in cui stai lavorando.
Pubblicità
Ad esempio, SASS è un preprocessore per CSS, che aggiunge il supporto per le variabili, l'annidamento, i mix in, l'importazione e l'ereditarietà e un sacco di altre cose. È fantastico e la parte migliore è che è completamente compatibile con i normali CSS, quindi non devi preoccuparti del supporto del browser. L'utente finale non sa mai che hai utilizzato SASS per creare il tuo sito, perché stai trasformando il codice SASS in codice CSS quando esegui il bundle con il webpack.
Un altro linguaggio preelaborato utile è TypeScript di Microsoft. TypeScript è un superset sintattico di JavaScript—il che significa che tutto il codice JavaScript è un codice TypeScript valido—e aggiunge il supporto per i tipi rigorosi, trasformando JavaScript in un linguaggio fortemente tipizzato come le varianti C. In realtà è un linguaggio compilato, che utilizza l'utilità tsc , ma l'estensione ts-loader Webpack aggiunge il supporto per esso. Il caricatore compilerà i tuoi file .ts in file .js.
Se sei già soddisfatto di CSS e JavaScript vanilla, non è necessario utilizzare alcun preprocessore, ma per coloro che lo desiderano per utilizzare la sintassi vanilla di nuova generazione, ti consigliamo di installare almeno Babel per supportare ES2015 e versioni successive. Ciò ti consentirà di utilizzare le funzionalità di ES2015 come l'importazione e le funzioni freccia.
Come impostare Webpack
Per prima cosa, è necessario che Node sia installato, in modo da poter eseguire JavaScript al di fuori del browser. Quindi, puoi installare Webpack da Node Package Manager (npm). Esegui questi comandi dalla radice della cartella del tuo progetto:
npm init -y npm install webpack –save-dev npm install webpack-cli –save-dev
Questo crea un nuovo package.json che tiene traccia del pacchetti che hai installato. Dovresti vedere una nuova cartella chiamata node_modules.
Webpack è ora installato e puoi eseguirlo con:
npx webpack Advertisement
Questo presuppone che il punto di ingresso per il tuo progetto sia ./src/index e che desideri che il file in bundle vada in dist/main.js. Se desideri configurare la configurazione in modo diverso o configurare i caricatori, dovrai creare un file di configurazione. Ci sono molte opzioni da usare e l'installazione varierà in base a cosa stai usando Webpack, ma la maggior parte delle volte il file di configurazione verrà posizionato nella radice del tuo progetto come webpack.config.js . Dovrai caricarlo con il flag –config , ma puoi automatizzarlo specificando uno script in package.json:
“scripts”: { “build”: “webpack –config webpack. config.js” }
Ora, ogni volta che esegui:
npm run build
Webpack eseguirà e raggrupperà il tuo progetto.
Se vuoi non doverlo esegui “npm esegui build” dopo ogni modifica apportata, dovresti installare webpack-dev-server, che si ricostruirà automaticamente quando vengono apportate modifiche.