static-html-webpack-boilerplate
static-html-webpack-boilerplate copied to clipboard
Support for partial html files
Could you provide an example of how to use partials in the html files?
Describe the solution you'd like
It would be great if the boilerplate supported partials (includes) and used them in the index.html
file
Hey @bgreater, I haven't had much experience with partials, but I'll look into it when I have the time! In the meantime, feel free to open a PR if you have any success with the issue on your own.
@erickzhao so far here is what I've done to get something working. Now it doesn't support variables which I think would be the next step (maybe using mustache-loader) but having the ability to split up repetitive code is a step in the right direction...
in webpack.config.common.js
...
{
test: /\.html$/,
loader: 'html-loader',
options: {
interpolate: true
}
},
...
in index.html
...
${require('./_partials/test.html')}
...
As I understand it the partial is relative to the file calling it and not the root. But this has allowed me to bring in common html snippets for multiple pages.
Hey, thanks for the great boilerplate! I think adding a template engine (like mustache-loader or handlebars-loader for Webpack) could be great! On one hand I appreciate the simplicity of using pure HMTL, but in practice code splitting quickly becomes needed (for a shared navigation menu for example).
Concretely, that means we would write .hbs files (using Handlebars) instead of .html files, gaining the benefits of using variables or includes.
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
Everything will be compiled into static HTML with webpack, no performance issue here.
I could look into that and send a PR, But it's up to you @erickzhao if you're willing to drop pure HTML :)
Edit : And if I'm not wrong, this would be completely optional. Up to developers to create .html or .hbs files. So you get the best of both worlds :)
@mathieuhasum that sounds dope! I've been a bit busy this school semester, but feel free to open a PR!
+1 for handlebars
I tried to do handlebars here but it's awkwardly setup in the app.js file. Not sure if I'm setting this up wrong or handlebars wouldn't work well for what I'm thinking. I'll look into mustache
https://github.com/ljmerza/static-html-webpack-boilerplate/tree/handlebars