Webpack Konfiguration für mehrere Einstiegspunkte/templates

Question

Es gibt die folgende Aufgabe - ich Ordner mit Blick haben:

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

Also, ich brauche eine einfache Konfiguration für webpack zu schaffen, die die folgende Ausgabe erzeugen kann 'public' Ordner:

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

ich verstehe, dass ich mehrere Einstiegspunkte mit ihm verwenden kann:

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

Auch ich verstehe, dass ich Bundle (public/js/view1.js) in mit HtmlWebpackPlugin injizieren kann. Aber was ist mit mehreren Punkten? Muss ich HtmlWebpackPlugin für jede HTML-Ansicht hinzufügen? Danke im Voraus!

Answer 1

Sie müssen mehrere HtmlWebpackPlugin Abschnitte für jede HTML-Seite hinzufügen, die Sie erstellen möchten.

Hier ist ein Beispiel meiner eigenen config:

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' 
    }) 
] 

Die chunks Eigenschaft Schlüssel ist, weil es nur die Ressourcen, die Sie für jede Seite müssen wählen können.