WebPACK config dla wielu punktów wejścia/szablonów

Question

znajduje się następujące zadanie - Mam folder z widokiem:

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

Więc muszę stworzyć prosty config dla WebPacka, który może tworzyć następujące dane wyjściowe 'publiczne' Folder:

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

rozumiem, że mogę korzystać z wielu punktów wejścia z nim:

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

Rozumiem również, że mogę wstrzykiwać pakiet (public/js/view1.js) w public/view1.html przy pomocy HtmlWebpackPlugin. Ale co z wieloma punktami? Czy muszę dodać HtmlWebpackPlugin dla każdego widoku html? Z góry dziękuję!

Answer 1

Należy dodać wiele sekcji HtmlWebpackPlugin dla każdej strony .html, którą chcesz utworzyć.

Oto próbka mojego własnego 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' 
    }) 
] 

Obiekt chunks jest kluczowa, ponieważ pozwala wybrać tylko zasoby potrzebne dla każdej strony.