How to bundle multiple html elements into 1 index.html

Question

How to bundle multiple html elements into 1 index.html

Answer 1

during development split the index.html structure into several html (header.html, main.html, footer.html). how, when building a project, to combine into one main.html

Answer 2

Use webpack with HtmlWebpackPlugin

Eg.

plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
inject: true,
chunks: ['index'],
filename: 'index.html'
}),
new HtmlWebpackPlugin({
template: './src/about.html',
inject: true,
chunks: ['index'],
filename: 'about.html'
}),
new HtmlWebpackPlugin({
template: './src/contacts.html',
inject: true,
chunks: ['index'],
filename: 'contacts.html'
})
]

This would reusing index.js file in every html page with chunks: [‘index’]

This is not spa, since they are multiple html pages, you don't need to bundle them into one index.html.