Alai

webpack è un module bundler. Il suo scopo principale è quello di impacchettare i file JavaScript per l’utilizzo in un browser, ma è anche in grado di trasformare, impacchettare o confezionare praticamente qualsiasi risorsa o bene.

Indice

1. Installazione
2. Introduzione
3. Concetti
4. Contribuire
5. Supporto
6. Core Team
7. Sponsorizzazione
8. Premium Partner
9. Altri finanziatori e sponsor
10. Sponsor Oro
11. Sponsor Argento
12. Sponsor Bronzo
13. Backers
14. Grazie speciali

Installa

Installa con npm:

npm install --save-dev webpack

Installa con yarn:

yarn add webpack --dev

Introduzione

webpack è un bundler per moduli. Lo scopo principale è quello di impacchettare i file JavaScript per l’uso in un browser, ma è anche in grado di trasformare, impacchettare o confezionare qualsiasi risorsa o bene.

TL;DR

• Bundles ES Modules, CommonJS, e moduli AMD (anche combinati).
• Può creare un singolo bundle o chunks multipli che sono caricati in modo asincrono a runtime (per ridurre il tempo di caricamento iniziale).
• Le dipendenze sono risolte durante la compilazione, riducendo la dimensione del runtime.
• I caricatori possono pre-elaborare i file durante la compilazione, ad esempio TypeScript in JavaScript, stringhe Handlebars in funzioni compilate, immagini in Base64, ecc.
• Sistema di plugin altamente modulare per fare qualsiasi altra cosa la tua applicazione richieda.

Iniziare

Guarda la guida rapida di webpack per iniziare e le altre guide.

Compatibilità con i browser

webpack supporta tutti i browser che sono ES5-compliant (IE8 e inferiori non sono supportati).webpack necessita anche di Promise per import() e require.ensure(). Se vuoi supportare i vecchi browser, dovrai caricare un polyfill prima di usare queste espressioni.

Concetti

Plugin

webpack ha una ricca interfaccia per i plugin. La maggior parte delle caratteristiche all’interno di webpack stesso usa questa interfaccia per i plugin. Questo rende webpack molto flessibile.

Nome	Stato	Dimensione installazione	Descrizione
mini-css-extract-plugin			Estra i CSS in file separati. Crea un file CSS per ogni file JS che contiene CSS.
compression-webpack-plugin			Prepara versioni compresse delle risorse per servirle con Content-Encoding
html-webpack-plugin			Semplifica la creazione di file HTML (index.html) per servire i tuoi bundle

Loaders

webpack permette di usare i loader per preprocessare i file. Questo ti permette di raggruppare risorse statiche ben oltre il JavaScript. Puoi facilmente scrivere i tuoi caricatori usando Node.js.

I caricatori sono attivati usando i prefissi loadername! nelle dichiarazioni require(), o sono applicati automaticamente tramite regex dalla tua configurazione di webpack.

File

Nome	Stato	Dimensione installazione	Descrizione
raw-loader			Carica il contenuto grezzo di un file (utf-8)
val-loader			Esegue il codice come modulo e considera le esportazioni come codice JS
url-loader			Funziona come il file loader, ma può restituire un Data Url se il file è più piccolo di un limite
file-loader			Emette il file nella cartella di output e restituisce l’url (relativo)

JSON

Nome	Stato	Dimensione installazione	Descrizione
			Carica e traspila un file CSON

Transpiling

Nome	Stato	Dimensione installazione	Descrizione
			Carica il codice ES2015+ e traspila in ES5 usando Babel
			Carica il codice ES2015+ e traspila in ES5 usando Traceur
			Carica TypeScript come JavaScript
			Carica CoffeeScript come JavaScript

Templating

Nome	Stato	Dimensione installazione	Descrizione
			Esporta HTML come stringa, richiede riferimenti a risorse statiche
			Carica i template Pug e restituisce una funzione
			Compila Markdown in HTML
			Carica e trasforma un file HTML usando PostHTML
			Compila Handlebars in HTML

Styling

Nome	Stato	Dimensione installazione	Descrizione
<style>			Aggiungi le esportazioni di un modulo come stile al DOM
			Carica il file CSS con le importazioni risolte e restituisce il codice CSS
			Carica e compila un file LESS
			Carica e compila un file Sass/SCSS
			Carica e compila un file Stylus
			Carica e trasforma un file CSS/SSS usando PostCSS

Frameworks

Nome	Stato	Dimensione installazione	Descrizione
			Carica e compila componenti Vue
			Elabora HTML & CSS con un preprocessore a scelta e require() Componenti Web come moduli di prima classe
			Carica e compila componenti Angular 2
			Riot official webpack loader

Performance

webpack usa I/O asincrono e ha più livelli di caching. Questo rende webpack veloce e incredibilmente veloce nelle compilazioni incrementali.

Formati dei moduli

webpack supporta ES2015+, CommonJS e moduli AMD fuori dalla scatola. Esegue un’analisi statica intelligente sull’AST del vostro codice. Ha anche un motore di valutazione per valutare le espressioni semplici. Questo ti permette di supportare la maggior parte delle librerie esistenti out of the box.

Code Splitting

webpack ti permette di dividere il tuo codice base in chunk multipli. I chunks vengono caricati in modo asincrono in fase di esecuzione. Questo riduce il tempo di caricamento iniziale.

Ottimizzazioni

webpack può fare molte ottimizzazioni per ridurre la dimensione dell’output del tuo JavaScript deduplicando i moduli usati frequentemente, minificando e dandoti il pieno controllo di ciò che viene caricato inizialmente e di ciò che viene caricato a runtime attraverso la divisione del codice. Può anche rendere i tuoi pezzi di codice cachefriendly usando gli hash.

Contribuire

Vogliamo che contribuire a webpack sia divertente, piacevole ed educativo per chiunque e per tutti. Abbiamo un vibrante ecosistema che va oltre questo singolo repo. Vi invitiamo a controllare qualsiasi repository della nostra organizzazione o dell’organizzazione webpack-contrib che ospita tutti i nostri loader e plugin.

I contributi vanno ben oltre le pull request e i commit. Sebbene ci piaccia darvi l’opportunità di dare la vostra impronta a webpack, siamo anche entusiasti di ricevere una varietà di altri contributi tra cui:

• Aggiornamenti della documentazione, miglioramenti, disegni o correzioni di bug
• Correzioni ortografiche o grammaticali
• README.md correzioni o riprogettazioni
• Aggiungimento di unità o test funzionali
• Triaggio dei problemi su GitHub — specialmente determinare se un problema persiste ancora o è riproducibile.
• Cercare #webpack su twitter e aiutare qualcun altro che ha bisogno di aiuto
• Insegnare ad altri come contribuire ad uno dei tanti repo di webpack!
• Bloggare, parlare o creare tutorial su una delle tante caratteristiche di webpack.
• Aiutare gli altri nel nostro canale gitter di webpack.

Per iniziare dai un’occhiata alla nostra documentazione sul contribuire.

Se sei preoccupato o non sai da dove iniziare, puoi sempre contattare Sean Larkin (@TheLarkInn) su Twitter o semplicemente inviare un problema e un manutentore potrà aiutarti a darti una guida!

Abbiamo anche iniziato una serie sulla nostra pubblicazione Medium chiamata The Contributor’s Guide to webpack. Vi invitiamo a leggerla e a postare qualsiasi domanda o risposta se avete ancora bisogno di aiuto.

Vuoi parlare di webpack? Ci piacerebbe rivedere il tuo abstract/CFP! Puoi inviarlo via email a webpack opencollective com e possiamo darti consigli e suggerimenti!!!

Creare i tuoi plugin e caricatori

Se crei un caricatore o un plugin, ci piacerebbe <3 che tu lo rendessi open source e lo mettessi su npm. Seguiamo la convenzione di denominazione x-loader, x-webpack-plugin.

Supporto

Consideriamo webpack uno strumento di basso livello usato non solo individualmente ma anche stratificato sotto altri fantastici strumenti. A causa della sua flessibilità, webpack non è sempre la soluzione entry-level più semplice, tuttavia crediamo che sia la più potente. Detto questo, siamo sempre alla ricerca di modi per migliorare e semplificare lo strumento senza compromettere la funzionalità. Se hai qualche idea su come raggiungere questo obiettivo, siamo tutti orecchi!

Se hai appena iniziato, dai un’occhiata alla nostra nuova pagina di documenti e concetti. Questa ha una panoramica di alto livello che è ottima per i principianti!

Cercate i documenti di webpack 1? Controlla il vecchio wiki, ma nota che questa versione deprecata non è più supportata.

Se vuoi discutere di qualcosa o semplicemente hai bisogno di aiuto, qui c’è la nostra stanza Gitter dove ci sono sempre persone che cercano di aiutare!

Se hai ancora difficoltà, ci piacerebbe che tu ponessi una domanda su StackOverflow con il tag webpack. È molto più facile rispondere alle domande che includono il tuo webpack.config.js e i file rilevanti! Quindi se puoi fornirli, te ne saremo estremamente grati (e più probabilmente ti aiuteremo a trovare la risposta!)

Se sei esperto di Twitter puoi twittare #webpack con la tua domanda e qualcuno dovrebbe essere in grado di raggiungerti e aiutarti.

Se hai scoperto un 🐜 o hai un suggerimento di funzionalità, sentiti libero di creare un problema su Github.

Licenza

Core Team

Tobias Koppers Core Founder di webpack

Johannes Ewald Loader & Plugins Early adopter di webpack

Sean T. Larkin Relazioni pubbliche Fondatore del core team

Kees Kluskens Sviluppo Sponsor

Sponsor

La maggior parte dei membri del core team, collaboratori di webpack e collaboratori dell’ecosistema fanno questo lavoro open source nel loro tempo libero. Se usi webpack per un compito serio, e vorresti che investissimo più tempo su di esso, per favore dona. Questo progetto aumenta anche il tuo reddito/produttività. Rende lo sviluppo e le applicazioni più veloci e riduce la larghezza di banda richiesta.

Ecco come usiamo le donazioni:

• Consentire al core team di lavorare su webpack
• Grazie ai collaboratori se hanno investito una grande quantità di tempo nel contribuire
• Supportare progetti nell’ecosistema che sono di grande valore per gli utenti
• Supportare progetti che sono più votati (work in progress)
• Costo dell’infrastruttura
• Tasse per la gestione del denaro

Premium Partners

Altri finanziatori e sponsor

Prima di iniziare ad usare OpenCollective, le donazioni venivano fatte anonimamente. Ora che abbiamo fatto il cambio, vorremmo riconoscere questi sponsor (e quelli che continuano a donare usando OpenCollective). Se abbiamo dimenticato qualcuno, per favore mandaci un PR, e ti aggiungeremo a questa lista.

Gold Sponsors

Diventa uno sponsor d’oro e ottieni il tuo logo sul nostro README su Github con un link al tuo sito.

Sponsor d’argento

Diventa uno sponsor d’argento e ottieni il tuo logo sul nostro README su Github con un link al tuo sito.

Sponsor di bronzo

Diventa uno sponsor di bronzo e ottieni il tuo logo sul nostro README su Github con un link al tuo sito.

Backers

Diventa un backer e ottieni la tua immagine sul nostro README su Github con un link al tuo sito.

Ringraziamenti speciali a

(In ordine cronologico)

• @google per Google Web Toolkit (GWT), che mira a compilare Java in JavaScript. Presenta un Code Splitting simile a quello di webpack.
• @medikoo per modules-webmake, che è un progetto simile. webpack è nato perché volevo il Code Splitting per modules-webmake. È interessante notare che la questione del Code Splitting è ancora aperta (grazie anche a @Phoscur per la discussione).
• @substack per browserify, che è un progetto simile e fonte di molte idee.
• @jrburke per require.js, che è un progetto simile e fonte di molte idee.
• @defunctzombie per la specifica browser-field, che rende disponibili moduli per node.js, browserify e webpack.
• Ogni primo utente di webpack, che ha contribuito a webpack scrivendo problemi o PR. Avete influenzato la direzione…
• @shama, @jhnns e @sokra per mantenere questo progetto
• Tutti quelli che hanno scritto un caricatore per webpack. Voi siete l’ecosistema…
• Tutti quelli che ho dimenticato di menzionare qui, ma che hanno anche influenzato webpack.