5

Is there a way to include html partial inside another partial using webpack? I am using html-loader to do this:

index.html

<%= require('html-loader!./partials/_header.html') %>

But when I try to include another partial inside a _header.html it is not able to render it.

This is not working:

_header.html

<%= require('html-loader!./partials/_nav.html') %>
mirta
  • 644
  • 10
  • 25

2 Answers2

4

I was combining a little and I was able to find a solution.

index.html

<%= require('html-loader?root=.&minimize=true&interpolate!./partials/_header.html') %>

and then in _header.html

${require('html-loader?root=.!../partials/_nav.html')}
JanuszO
  • 1,140
  • 12
  • 25
0

Using html-loader with interpolate option.

https://github.com/webpack-contrib/html-loader#interpolation

{ test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

And then in html pages you can import partials html and javascript variables.

<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
  <!-- Importing navbar -->
  ${require('./partials/nav.html')}
  <!-- Importing variable from javascript file -->
  <h1>${require('../js/html-variables.js').hello}</h1>
  <!-- Importing footer -->
  ${require('./partials/footer.html')}
</body>
</html>

html-variables.js looks like this:

const hello = 'Hello!';
const bye = 'Bye!';

export {hello, bye}

You can also include partials inside another partial the same way, using ${require('path/to/your/partial.html').

The only downside is that you can't import other variables from HtmlWebpackPlugin like this <%= htmlWebpackPlugin.options.title %> (at least I can't find a way to import them), just write the title in your html or use a separate javascript file for handle variables if needed.

pldg
  • 2,427
  • 3
  • 22
  • 37
  • You know what I dislike here, when using this approach in a multi-page-app: You have to repeat yourself. In every page you have to require top,nav and footer. Instead of having a single layout page which includes them all and you just import the body and everything else you need for this page. – Legends Jan 01 '20 at 00:04
  • @Legends I don't use html-loader anymore, there are better way to deal with this problem. For example I made this [static site generator with webpack](https://github.com/pldg/learn-webpack/tree/master/static-site-generator) (I also have an updated version, when I've time I'll upload it) – pldg Jan 01 '20 at 09:13