Concetti fondamentali del framework Webpack (elenco dei punti chiave)

Cos'è webpack

webpack è uno strumento di packaging di costruzione frontend (non è una libreria o una struttura di framework), che può trattare e utilizzare come moduli vari tipi di risorse, come JS (inclusi JSX), coffee, css (inclusi less/sass), immagini, ecc.

1. Conoscenze di base

　　1.1 webpack è un module bundler (packager di moduli) per applicazioni JavaScript moderne. Quando webpack tratta un'applicazione, costruisce ricorsivamente un grafo delle dipendenze (dependency graph), che contiene tutti i moduli necessari all'applicazione, e poi li impacchetta in uno o più bundle.

　　1.2 I quattro concetti fondamentali di webpack:

　　　　1.2.1 entry (entrata): entry point, punto di ingresso (può esserci più di uno), webpack parte da questo punto per trovare quali file sono dipendenti dal file di ingresso, costruire un grafo delle dipendenze interni e poi esportare i risultati nei file chiamati bundles

　　　　1.2.2 output (uscita): specifica il percorso (path) e il nome (filename) dei file bundles dopo il trattamento dell'entry point　　　　

　　　　1.2.3 loader (caricatore): utilizzato per gestire file non JS, convertendo tutti i file in moduli che webpack può gestire, quindi consegnandoli a webpack per il packaging e altri trattamenti; loader webpack, in termini tecnici, trasforma tutti i tipi di file in moduli che possono essere direttamente richiamati nel grafo delle dipendenze dell'applicazione, avendo due obiettivi:

　　　　　　1.2.3.1 Utilizzare l'attributo test per identificare i file convertibili corrispondenti al loader

　　　　　　1.2.3.2 Utilizzare l'attributo use per convertire i file e aggiungerli alla dipendenza del grafico, che alla fine verranno aggiunti al bundle

　　　　　　Se si desidera definire un loader nella configurazione webpack, è necessario definirlo in module.rules invece di rules

　　　　1.2.4 plugins (plugin): Dalla ottimizzazione e compressione del pacchetto fino a ridefinire le variabili nell'ambiente, l'interfaccia dell'plugin è estremamente potente e può gestire una vasta gamma di compiti

　　　　　　Per utilizzare un plugin, è sufficiente richiamarlo con require() e aggiungerlo all'array plugins. La maggior parte dei plugin può essere personalizzata tramite opzioni (option). Puoi anche utilizzare lo stesso plugin più volte in un file di configurazione per scopi diversi, in questo caso è necessario creare un'istanza del plugin utilizzando l'operatore new.

　　　　　　Webpack fornisce molti plugin pronti all'uso! Per ulteriori informazioni, consulta la lista dei plugin e per dettagli più approfonditi, consulta la documentazione ufficiale https://doc.webpack-china.org/concepts/.

Conclusione

Come riassunto, questo articolo introduce ai concetti fondamentali (riassunto delle conoscenze) del framework Webpack che spero sia utile a tutti voi. Se avete qualsiasi domanda, lasciate un commento e sarò felice di rispondere tempestivamente. Ringrazio anche tutti i sostenitori del tutorial di urla!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright è di proprietà del rispettivo proprietario, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.