Webpack config for multiple entry points / templates

Question

There is the following task - I've got folder with views:

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

So, I need to create a simple config for webpack, which can create the following output 'public' folder:

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

I understand, that I can use multiple entry points with it:

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

Also I understand, that I can inject bundle (public/js/view1.js) in public/view1.html using HtmlWebpackPlugin. But what about multiple points? Must I add HtmlWebpackPlugin for each html view? Thanks in advance!

Answer 1

You must add multiple HtmlWebpackPlugin sections for each .html page you wish to create.

Here's a sample of my own 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'
  })
]

The chunks property is key because it lets you select only the resources you need for each page.