Caricatori di webpack vs plugin; qual è la differenza?

Qual è la differenza tra caricatori e plugin in webpack?

La documentazione per i plugin dice semplicemente:

Usa i plugin per aggiungere funzionalità tipicamente correlate ai bundle nel webpack.

So che babel utilizza un caricatore per le trasformazioni jsx / es2015, ma sembra che altre attività comuni (copy-webpack-plugin, ad esempio) utilizzino invece plug-in.

I caricatori eseguono la trasformazione pre-elaborazione di praticamente qualsiasi formato di file quando usi qc come require("my-loader!./my-awesome-module")nel tuo codice. Rispetto ai plugin, sono abbastanza semplici in quanto (a) espongono solo una singola funzione al webpack e (b) non sono in grado di influenzare il processo di compilazione effettivo.

I plugin d'altra parte possono integrarsi profondamente nel webpack perché possono registrare hook all'interno del sistema di compilazione dei webpack e accedere (e modificare) il compilatore, e come funziona, così come la compilazione. Pertanto, sono più potenti, ma anche più difficili da mantenere.

Aggiunta di risposte complementari e più semplici.

Caricatori:

I caricatori funzionano a livello di file individuale durante o prima della generazione del bundle .

Plugin:

I plugin funzionano a livello di bundle o chunk e di solito funzionano alla fine del processo di generazione del bundle. I plugin possono anche modificare il modo in cui vengono creati i pacchetti stessi. I plugin hanno un controllo più potente dei caricatori.

Solo per un esempio puoi vedere chiaramente nell'immagine sottostante dove funzionano i caricatori e dove funzionano i plugin -

Riferimenti: articolo e immagine

Al suo interno, webpack è solo un bundler di file. Considerando uno scenario molto semplice (nessuna suddivisione del codice), ciò potrebbe significare solo le seguenti azioni (ad alto livello):

1. trova il file di ingresso e carica il suo contenuto in memoria
2. abbina un determinato testo all'interno del contenuto e valuta quelli (ad esempio @import)
3. trova le dipendenze in base alla valutazione precedente e fai lo stesso con esse
4. uniscili tutti in un fascio in memoria
5. scrivere i risultati nel file system

Quando si esaminano attentamente i passaggi precedenti, ciò risuona con ciò che fa un compilatore Java (o qualsiasi compilatore). Ci sono ovviamente delle differenze, ma non importa per capire i caricatori e i plugin.

Caricatori:

sono qui perché webpack promette di raggruppare qualsiasi tipo di file.

Poiché il webpack al suo interno è in grado di raggruppare solo file js, questa promessa significava che il team principale di webpack doveva incorporare flussi di compilazione che permettevano al codice esterno di trasformare un particolare tipo di file in un modo che webpack poteva consumare.

Questi codici esterni sono chiamati caricatori e in genere vengono eseguiti durante i passaggi 1 e 3 sopra. Pertanto, poiché la fase in cui questi caricatori devono essere eseguiti è ovvia, non richiedono hook né influenzano il processo di compilazione (poiché la compilazione o il bundle avvengono solo al passaggio 4).

Quindi i Loader preparano il palcoscenico per la compilazione e in un certo senso estendono la flessibilità del compilatore webpack.

Plugin:

sono qui perché anche se webpack non promette direttamente un output variabile, il mondo lo vuole e webpack lo permette.

Poiché il webpack al suo interno è solo un bundler e tuttavia esegue diversi passaggi e passaggi secondari, questi passaggi possono essere utilizzati per incorporare funzionalità aggiuntive.

Il processo di compilazione della produzione (minimizzazione e scrittura nel file system), che è una capacità nativa del compilatore webpack, ad esempio, può essere trattato come un'estensione della sua capacità principale (che è solo raggruppamento) e può essere trattato come un plugin nativo. Se non lo avessero fornito, lo avrebbe fatto qualcun altro.

Guardando il plug-in nativo sopra, sembra che il raggruppamento o la compilazione del pacchetto web possa essere suddiviso in un processo di raggruppamento di base, oltre a molti processi di plug-in nativi che possiamo disattivare, personalizzare o estendere. Ciò significava consentire al codice esterno di partecipare al processo di raggruppamento in punti specifici tra cui scegliere (chiamati hook).

I plugin quindi influenzano l'output e in qualche modo estendono le capacità del compilatore webpack.

I caricatori funzionano a livello di file . Possono scrivere un modello, elaborare del codice per trasferirlo a seconda della tua convenienza, ecc.

I plugin funzionano a livello di sistema . Possono lavorare su pattern, gestione del file system (nome, percorso), ecc.