Webpack configurazione per molteplici punti di entrata/templates

Question

C'è il seguente compito - Ho cartella con vista:

--views 
----view1 
------view1.js 
------view1.html(or jade) 
----view2 
------view2.js 
------view2.html(or jade) 

Così, ho bisogno di creare un semplice configurazione per webpack, che può creare il seguente output cartella 'pubblica':

--public 
----js 
------view1.js 
------view2.js 
----view1.html 
----view2.html 

ho capito, che posso usare più punti di ingresso con esso:

entry: { 
    view1: './views/view1/view1' 
    view2: './views/view2/view2 
    } 

Inoltre, ho capito che posso iniettare un pacchetto (public/js/view1.js) in public/view1.html utilizzando HtmlWebpackPlugin. Ma per quanto riguarda i punti multipli? Devo aggiungere HtmlWebpackPlugin per ogni vista html? Grazie in anticipo!

Answer 1

È necessario aggiungere più sezioni HtmlWebpackPlugin per ogni pagina .html che si desidera creare.

Ecco un esempio della mia configurazione:

plugins: [ 
    new HtmlWebpackPlugin({ 
    title: 'SearchView', 
    chunks: ['manifest', 'vendor', 'searchView'], 
    template: `${PATHS.app}/index.ejs`, // Load a custom template 
    inject: 'body', // Inject all scripts into the body 
    filename: 'searchView.html' 
    }), 
    new HtmlWebpackPlugin({ 
    title: 'TicketView', 
    chunks: ['manifest', 'vendor', 'ticketView'], 
    template: `${PATHS.app}/index.ejs`, // Load a custom template 
    inject: 'body', // Inject all scripts into the body 
    filename: 'ticketView.html' 
    }) 
] 

La proprietà chunks è fondamentale perché consente di selezionare solo le risorse necessarie per ogni pagina.