static-html-webpack-boilerplate icon indicating copy to clipboard operation
static-html-webpack-boilerplate copied to clipboard

Support for partial html files

Open bgreater opened this issue 6 years ago • 6 comments

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

bgreater avatar Oct 03 '18 22:10 bgreater

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 avatar Oct 04 '18 03:10 erickzhao

@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.

bgreater avatar Oct 04 '18 03:10 bgreater

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 avatar Oct 24 '18 14:10 mathieuhasum

@mathieuhasum that sounds dope! I've been a bit busy this school semester, but feel free to open a PR!

erickzhao avatar Oct 24 '18 22:10 erickzhao

+1 for handlebars

ljmerza avatar Oct 29 '18 13:10 ljmerza

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

ljmerza avatar Jan 25 '19 23:01 ljmerza