Menu
I'm trying to figure out a way where you can have an index file that when compiled loads the global header and footer into the index.html file so I don't have to add this every time.
At the moment this is what creates my index.html file:
new HtmlWebpackPlugin({
title: 'Typescript Webpack Starter',
template: '!!ejs-loader!src/index.html'
}),
It loads the JS in the body and the css in the head fine but I'm wondering if I can do something like the below (just like a template engine would)
<body>
{{HEADER GETS IMPORTED HERE}}
<p>Success your page has loaded</p>
<button class="button">Button</button>
{{FOOTER GETS IMPORTED HERE}}
</body>
Let me know your thoughts
824
As per the official document : YOU CAN ACHIEVE it.
If you already have a template loader, you can use it to parse the template. Please note that this will also happen if you specifiy the html-loader and use .html file as template.
module: {
loaders: [
{ test: /\.hbs$/, loader: "handlebars" }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
template: 'my-index.hbs'
})
]
Just in case anybody needs a working example. I did it with an ejs-loader
<div id="page-wrapper">
<%- include partials/header.ejs %>
<div class="content"></div>
<%- include partials/footer.ejs %>
</div>
Also put evth. into a small webpack boilerplate there are some more extras inside ;) feel free to use it.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
