WebPACKのコンフィグ

Question

次のタスクがあります - 私は、ビューとフォルダを持っている：

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

だから、私は次の出力を作成することができますWebPACKのための簡単な設定を、作成する必要があります'パブリック' フォルダ：

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

私は理解し、私はそれに複数のエントリポイントを使用することができます：

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

また、HtmlWebpackPluginを使用してpublic/view1.htmlにバンドル（public/js/view1.js）を注入できることを理解しています。しかし、複数の点はどうですか？各HTMLビューにHtmlWebpackPluginを追加する必要がありますか？前もって感謝します！

Answer 1

作成する.htmlページごとに、HtmlWebpackPluginセクションを複数追加する必要があります。

は、ここに私自身の設定のサンプルです：それはあなたがページごとに必要なリソースのみを選択することができますので、

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

chunksプロパティが鍵となります。