Come raggruppare in asset Webpack in più pagine che non si collegano a tutte le altre risorse?

Question

C'è qualcosa che non riuscivo a capire su Webpack.

La maggior parte degli esempi di webpack mostrano un punto di ingresso principale app.js che importa tutti gli componenti di reazione per Webpack per creare ricorsivamente un file risultante. Se ci fossero più punti di accesso, come pageA.js e pageB.js, li inseriremo in un array nell'argomento entry.

Il mio problema tuttavia è che il mio punto di ingresso "principale" non utilizza e importa ogni singolo componente. Forse solo alcuni. Nella pagina A, potrei importare solo ComponentA e ComponentB. Nella pagina B, potrei importare solo ComponentB e ComponentC. Quindi nel main.js sulla mia MainPage potrei importare solo ComponentD.

Posso mettere main.js, Page A e PageB tutti nei miei punti di ingresso. Ma significa che devo aggiungere all'elenco di voci in config webpack ogni volta che ho una nuova pagina?

Come si deve affrontare questo scenario utilizzando Webpack?

Answer 1

La configurazione di Webpack è in realtà un modulo JS. Ciò significa che l'oggetto che si restituisce può essere creato a livello di codice anziché manualmente.

Quello che vuoi è per il webpack a handle chunks optimization properly for you. Questo, insieme a determinare a livello di codice le pagine che hai, dovrebbe consentire di generare tutte le tue risorse.

Answer 2

Sembra che la configurazione sia una tipica applicazione multipagina Webpack, che di solito è costituita da un gruppo comune/fornitore (punto di ingresso) e da pacchetti separati (punti di ingresso) per ogni pagina, come la Pagina Page e la Pagina B.

Per ogni pagina è necessario prima includere il gruppo comune/fornitore, quindi includere il pacchetto specifico della pagina.

<script src="common.js"> 
<script src="PageA.js"> 

Dai un'occhiata alla multiple-entry-points e multiple-commons-chunks. Webpack può estrarre automaticamente i deps comuni e raggrupparli insieme (1o esempio), oppure è possibile specificare quali deps dovrebbero andare in quali mandrini comuni (2 ° esempio). Dai anche un'occhiata allo common-chunk-and-vendor-chunk, che ha spiegato perfettamente come funziona il mandrino comune.

In base alla descrizione, la configurazione è molto simile al primo esempio (punti di immissione multipli).

E sì, sarà probabilmente necessario aggiungere una nuova voce quando si dispone di una nuova pagina, come PageC.