Per supportare milioni di funzionalità, casi d'uso ed esigenze, sono necessarie fondamenta sicure, stabili, affidabili e scalabili. Solo con il webpack, le possibilità sono illimitate!

webpack 4 beta: provalo oggi!

La strada per il rilascio stabile!

Dall'inizio di agosto - quando abbiamo investito webpack / webpack # master per la prossima filiale - abbiamo assistito a un incredibile flusso di contributi!

Statistiche di contributo di Git per il prossimo ramo del webpack a colpo d'occhio con gitinspector! Provalo sul tuo progetto per vedere approfondimenti. PS: Questo non include l'incredibile lavoro svolto nel nostro team webpack-cli e nell'organizzazione webpack-contrib a supporto dei nostri caricatori e plugin.

Oggi siamo orgogliosi di condividere il culmine di quel lavoro rilasciando webpack 4.0.0-beta.0!

Promessa mantenuta - Ciclo di rilascio prevedibile

Quando abbiamo terminato il rilascio di webpack 3, abbiamo promesso alla community che avremmo offerto un ciclo di sviluppo più lungo tra le versioni principali.

Abbiamo mantenuto questa promessa [e continuiamo a mantenerla] offrendoti un gran numero di funzionalità, miglioramenti e correzioni di bug che non vediamo l'ora che tu possa mettere in pratica! Ecco come iniziare!

‍Come installare [v4.0.0-beta.0]

Se si utilizza filato:

filato aggiungi webpack @ prossimo webpack-cli --dev

o npm:

npm install webpack @ next webpack-cli --save-dev

🛠Come migrare?

Più persone provano e segnalano incompatibilità di plug-in e caricatori durante il test di Webpack 4, più possiamo creare una guida alla migrazione vivente.

Quindi abbiamo bisogno che tu controlli il registro delle modifiche ufficiale, e anche la nostra bozza di migrazione e fornisca un feedback dove manca! Questo aiuterà il nostro team di documentazione a creare la nostra guida ufficiale alla migrazione con versione stabile!

Cosa c'è di nuovo in Webpack 4?

Di seguito sono riportate alcune delle funzionalità più importanti che ti piacerà leggere. Per l'elenco completo delle modifiche, funzionalità e modifiche API interne, fare riferimento al nostro registro delle modifiche !!!

Performance

Le prestazioni saranno notevolmente migliorate in più scenari per il webpack 4. Ecco alcune delle notevoli modifiche che abbiamo apportato per raggiungere questo obiettivo:

  • Per impostazione predefinita, quando si utilizza la modalità di produzione, parallelizzeremo e memorizzeremo automaticamente nella cache il lavoro di minificazione svolto da UglifyJS.
  • Abbiamo distribuito una nuova versione del nostro sistema di plugin in modo che gli hook e i gestori di eventi siano monomorfi.
  • Inoltre, il webpack ora ha eliminato il supporto per il nodo v4, permettendoci di aggiungere una considerevole quantità di sintassi ES6 e strutture dati più recenti, ottimizzate anche da V8. Finora abbiamo visto rapporti di vita reale di 9h a 12min!

PS: non abbiamo nemmeno implementato la cache completa e il parallelismo [traguardo del webpack 5].

Maggiori predefiniti - # 0CJS

Fino ad oggi, il webpack ha sempre richiesto di impostare esplicitamente le proprietà di immissione e output. Con webpack 4, webpack supporrà automaticamente che la proprietà della voce sia ./src/ e i bundle verranno generati su ./dist per impostazione predefinita.

Ciò significa che non è più necessaria una configurazione per iniziare con il webpack !!!

webpack 4.0.0-beta.0 che esegue una build senza una configurazione! # 0CJS

Ora che il webpack è un bundler out-of-the-box # 0CJS (configurazione zero), getteremo le basi in 4.xe 5.0 per fornire più funzionalità predefinite lungo la strada.

Maggiori predefiniti - modalità

Devi scegliere (mode o --mode) tra due modalità ora: "produzione" o "sviluppo".

  • La modalità di produzione consente di ottimizzare ogni tipo di ottimizzazione. Ciò include, minimizzazione, sollevamento dell'ambito, scuotimento dell'albero, potatura dei moduli priva di effetti collaterali e include plug-in che dovresti utilizzare manualmente come NoEmitOnErrorsPlugin.
  • Modalità di sviluppo ottimizzata per la velocità e l'esperienza degli sviluppatori. Allo stesso modo, includiamo automaticamente funzionalità come i nomi dei percorsi nell'output del bundle, mappe eval-source, pensate per codice di facile lettura e tempi di costruzione rapidi!

sideEffects - Enorme vittoria per dimensioni di bundle

Abbiamo introdotto il supporto per sideEffects: false in package.json. Quando questo campo viene aggiunto, segnala al webpack che non ci sono effetti secondari nella libreria che vengono consumati. Ciò significa che il webpack può eliminare in modo sicuro tutte le riesportazioni utilizzate dal codice.

Ad esempio, l'importazione solo come esportazione singola da lodash costerebbe ~ 223 KiB [minimizzato]. Nel webpack 4, questo costo è ora di ~ 3 KiB !!!

Supporto JSON e agitazione dell'albero

Quando si importa JSON con sintassi ESModule, il webpack eliminerà le esportazioni inutilizzate dal "Modulo JSON". Per coloro che stanno già importando JSON nel tuo codice con un sacco di pezzi inutilizzati, dovresti vedere una riduzione significativa delle dimensioni delle dimensioni del bundle.

Aggiorna a UglifyJS2

Ciò significa che è possibile utilizzare la sintassi ES6, minimizzarla, senza prima un transpiler.

Vorremmo ringraziare il team di collaboratori di UglifyJs2 per il lavoro disinteressato e duro che hanno fatto per ottenere il supporto ES6. Non è stato un compito facile e ci piacerebbe che tu fermassi dal loro repository ed esprimessi apprezzamento e supporto.

UglifyJS2 ora supporta la sintassi JavaScript ES6!

Supporto + .mjs introdotto dal tipo di modulo

Storicamente, JavaScript è stato l'unico tipo di modulo di prima classe nel webpack. Ciò ha causato un sacco di problemi imbarazzanti per gli utenti in cui non sarebbero in grado di avere effettivamente pacchetti CSS / HTML, ecc. Abbiamo completamente estratto la specificità JavaScript dalla nostra base di codice per consentire questa nuova API. Attualmente costruito, ora abbiamo implementato 5 tipi di moduli:

  • javascript / auto: (quello predefinito nel webpack 3) Modulo Javascript con tutti i sistemi di modulo abilitati: CommonJS, AMD, ESM
  • javascript / esm: i moduli EcmaScript, tutti gli altri sistemi di moduli non sono disponibili (impostazione predefinita per i file .mjs)
  • javascript / dinamico: solo CommonJS e AMD; I moduli EcmaScript non sono disponibili
  • json: dati JSON, sono disponibili tramite richiesta e importazione (impostazione predefinita per i file .json)
  • webassembly / sperimentale: moduli WebAssembly (attualmente sperimentale e predefinito per i file .wasm)
  • Inoltre il webpack ora cerca le estensioni .wasm, .mjs, .js e .json in questo ordine per risolverlo

La cosa più interessante di questa funzione è che ora possiamo continuare a lavorare sui nostri tipi di moduli CSS e HTML (4.x). Ciò consentirebbe funzionalità come HTML come punto di accesso!

Supporto WebAssembly

Webpack ora per impostazione predefinita supporta l'importazione e l'esportazione di qualsiasi modulo WebAssembly locale. Ciò significa che è anche possibile scrivere caricatori che consentono di importare direttamente Rust, C ++, C e altri file lang dell'host WebAssembly:

OodBuongiorno CommonsChunkPlugin

Abbiamo anche rimosso CommonsChunkPluginand per impostazione predefinita abilitato molte delle sue funzionalità. Inoltre, per coloro che necessitano di un controllo approfondito sulla propria strategia di memorizzazione nella cache, abbiamo aggiunto optimisation.splitChunks e optimisation.runtimeChunk con un set di funzionalità più ricco e flessibile

E molto altro ancora!

Ci sono così tante altre funzionalità che ti consigliamo vivamente di controllarle tutte nel nostro registro delle modifiche ufficiale.

L'orologio inizia ora

Come promesso, aspetteremo un mese da oggi prima di rilasciare il webpack 4 stabile. Ciò offre al nostro ecosistema di plug-in, caricatori e integrazioni il tempo di testare, segnalare e aggiornare a Webpack 4.0.0!

Abbiamo bisogno che tu ci aiuti ad aggiornare e testare questa beta. Più possiamo testarlo oggi, più velocemente possiamo aiutare a valutare e identificare eventuali problemi che potrebbero sorgere lungo la strada!

Grazie mille a tutti i nostri collaboratori che hanno contribuito a rendere Wepback 4 quello che è oggi. Come diciamo sempre, il potere del webpack è la somma delle nostre parti e del nostro ecosistema.

Non hai tempo per contribuire? Vuoi restituire in altri modi? Diventa un sostenitore o sponsor del webpack donando al nostro collettivo aperto. Open Collective non solo aiuta a supportare il Core Team, ma supporta anche i collaboratori che hanno trascorso molto tempo a migliorare la nostra organizzazione nel tempo libero! ❤