Introduzione a Webpack [con progetto di esempio]

Webpack è un modulo bundler che facilita la creazione di complesse applicazioni JavaScript. Ha acquisito una forte trazione da quando la comunità di React lo ha scelto come strumento principale di costruzione. Webpack è nè un gestore di pacchetti nè un responsabile di attività poiché utilizza un approccio diverso (più avanzato), ma il suo obiettivo è anche quello di configurare un processo di build dinamico.

Webpack funziona con JavaScript vaniglia. Puoi usarlo per raggruppare le risorse statiche di un'applicazione, come immagini, caratteri, fogli di stile, script in un unico file mentre prendersi cura di tutte le dipendenze.

Non avrai bisogno di Webpack per creare un'app o un sito web semplice, ad esempio uno che abbia solo un JavaScript e un file CSS e alcune immagini, tuttavia può essere un salvataggi per un applicazione più complessa con diverse risorse e dipendenze.

Webpack vs task runner vs. Browserify

Quindi, come si impila Webpack rispetto ad altri strumenti di costruzione come Grunt, Gulp o Browserify?

Grunt e Gulp sono i corridori compito. Nel loro file di configurazione, tu specificare i compiti, e il task runner li esegue. Il flusso di lavoro di un task runner fondamentalmente assomiglia a questo:

Tuttavia, Webpack è un modulo bundler che analizza l'intero progetto, imposta un albero delle dipendenze, e crea un file JavaScript in bundle che serve al browser.

Browserify è più vicino a Webpack che ai runner di attività, come pure crea un grafico di dipendenza ma lo fa solo per i moduli JavaScript. Webpack fa un ulteriore passo avanti e non raggruppa solo il codice sorgente ma anche altri beni come immagini, fogli di stile, caratteri, ecc.

Se vuoi saperne di più come Webpack si confronta con altri strumenti di costruzione, Vi consiglio due articoli:

Di Andrew Ray Webpack: quando utilizzare e perché sul suo blog
Cory House's Browserify vs Webpack su FreeCodeCamp (con fantastiche illustrazioni)

Le due illustrazioni sopra sono dal Materiali webpack del manuale Pro React, un'altra risorsa che vale la pena dare un'occhiata.

Quattro concetti chiave di Webpack

Webpack ha quattro opzioni di configurazione principali chiamate “concetti principali” che dovrai definire nel processo di sviluppo:

Iscrizione - il punto di partenza del grafico delle dipendenze (uno o più file JavaScript).
Produzione - il file in cui si desidera il output da impacchettare a (un file JavaScript).
caricatori - trasformazioni sul patrimonio che trasformali in moduli Webpack in modo che possano essere aggiunto al grafico delle dipendenze. Per esempio, css-loader è usato per l'importazione di file CSS.
plugin - azioni e funzionalità personalizzate eseguito sul bundle. Ad esempio, il i18n-webpack-plugin incorpora la localizzazione nel pacchetto.

I caricatori funzionano in base al file prima che la compilazione abbia luogo. I plugin vengono eseguiti sul codice in bundle, alla fine del processo di compilazione.

Installa il Webpack

A installa Webpack, apri la riga di comando, vai alla cartella del tuo progetto ed esegui il seguente comando:

 npm init

Se non si desidera eseguire da soli la configurazione, è possibile creare npm popolare il package.json file con i valori predefiniti con il seguente comando:

 npm init -y

Quindi, installa Webpack:

 npm install webpack --save-dev

Se hai usato i valori di default, questo è il tuo package.json il file dovrebbe apparire ora (le proprietà possono essere in un ordine diverso):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," script ": " test ":" echo \ "Errore: nessun test specificato \" && exit 1 "," parole chiave ": []," author ":" "," license ":" ISC "

Crea il file di configurazione

Devi creare un webpack.config.js file nella cartella radice del progetto. Questo file di configurazione ha un ruolo centrale, poiché è qui che lo farai definire i quattro concetti fondamentali (punti di ingresso, uscita, caricatori, plugin).

Il webpack.config.js file contiene un oggetto di configurazione di quali proprietà è necessario specificare. In questo articolo, specificheremo le quattro proprietà corrispondono ai quattro concetti chiave (iscrizione, produzione, modulo, e collegare), ma l'oggetto config ha anche altre proprietà.

1. Creare i punti di ingresso

Puoi avere uno o più punti di ingresso. È necessario definirli in iscrizione proprietà.

Inserisci il seguente snippet di codice nel file webpack.config.js file. esso specifica un punto di ingresso:

 module.exports = entry: "./src/script.js";

Per specificare più di un punto di ingresso che è possibile utilizzare la matrice o la sintassi dell'oggetto.

Nella cartella del tuo progetto, crea un nuovo src cartella e a script.js file al suo interno. Questo sarà il tuo punto d'entrata. A scopo di test, solo mettere una stringa dentro. Ho usato il seguente (tuttavia, puoi anche utilizzarne uno più interessante):

 const greeting = "Ciao, sono un progetto di avvio Webpack."; document.write (saluto);

2. Definire l'output

Puoi avere solo un file di output. Webpack riunisce tutte le risorse in questo file. Devi configurare il produzione proprietà nel modo seguente:

 const path = require ("path"); module.exports = entry: "./src/script.js", output: nomefile: "bundle.js", percorso: path.resolve (__ dirname, 'dist');

Il nome del file la proprietà definisce il nome del file in bundle, mentre il sentiero proprietà specifica il nome della directory. L'esempio sopra creerà il /dist/bundle.js file.

Anche se non è obbligatorio, è meglio farlo utilizzare il path.resolve () metodo quando definisci il sentiero proprietà, come assicura una risoluzione del modulo precisa (il percorso assoluto dell'output viene creato in base a regole diverse in ambienti diversi, la risoluzione del modulo risolve questa discrepanza). Se usi path.resolve, devi richiedere il sentiero Modulo nodo nella parte superiore del webpack.config.js file.

3. Aggiungi i caricatori

A aggiungi i caricatori, è necessario definire il modulo proprietà. Sotto, aggiungiamo il babel-loader che ti permette di utilizzare in modo sicuro le funzionalità di ECMAScript 6 nei tuoi file JS:

 const path = require ("path"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", percorso: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, usa: loader: "babel-loader", opzioni: preimpostazioni: ["env"];

La configurazione può sembrare difficile ma è solo copiata da incollare Documentazione del caricatore Babel. La maggior parte dei caricatori viene fornita con un file Leggimi o una sorta di documentazione, in modo che tu possa (quasi) sempre sapere come configurarli correttamente. E i documenti Webpack hanno anche una pagina che spiega come configurare module.rules.

Puoi aggiungere quanti caricatori di cui hai bisogno, ecco la lista completa. Nota che devi anche installa ciascun caricatore con npm per farli funzionare. Per il caricatore Babel, è necessario installare i pacchetti Node necessari con npm:

 installazione npm --save-dev babel-loader babel-core babel-preset-env webpack

Se dai un'occhiata al tuo package.json file, vedrai che npm ha aggiunto tre pacchetti relativi a Babel al devDependencies proprietà, questi si prenderanno cura della compilation ES6.

4. Aggiungi i plugin

A aggiungi i plugin, è necessario specificare il plugins proprietà. Inoltre, devi anche richiedere i plugin uno per uno, come sono moduli esterni.

Nel nostro esempio, aggiungiamo due plugin Webpack: il Plugin HTML Webpack e il Preload plug-in Webpack. Webpack ha un bel ecosistema di plugin, puoi sfogliare l'elenco completo qui.

Per richiedere i plugin come moduli Node, crea due nuove costanti: HtmlWebpackPlugin e PreloadWebpackPlugin e utilizzare il richiedere() funzione.

 const path = require ("path"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = entry: "./src/script.js", output: filename: "bundle.js", percorso: path.resolve (__ dirname, 'dist'), module: rules: [test : /\.js$/, exclude: / (node_modules | bower_components) /, usa: loader: "babel-loader", opzioni: preimpostazioni: ["env"], plugin: [nuovo HtmlWebpackPlugin (), nuovo PreloadWebpackPlugin ()];

Proprio come nel caso dei caricatori, devi anche farlo installa i plugin Webpack con npm. Per installare i due plug-in nell'esempio, esegui i seguenti due comandi nella riga di comando:

 npm install html-webpack-plugin --save-dev npm installa --save-dev preload-webpack-plugin

Se controlli il tuo package.json file ora, vedrai che npm aggiunto i due plugin al devDependencies proprietà.

Esegui Webpack

A crea l'albero delle dipendenze e emettere il pacchetto, eseguire il seguente comando nella riga di comando:

 webpack

Di solito richiede uno o due minuti per Webpack per costruire il progetto. Al termine, vedrai un messaggio simile nella tua CLI:

Se tutto è andato bene, Webpack creato a dist cartella nella radice del tuo progetto e collocato i due file in bundle (bundle.js e index.html) dentro.

Github repo

Se vuoi controllare, scaricare o dare una sborsata all'intero progetto, dai un'occhiata al nostro repository Github.