Multiple HtmlWebpackPartialsPlugin()

stefanomonteiro commented 6 years ago

I am trying to use it to add the main content of a page. The template index.html has the header, navbar and the footer.

[
    new HtmlWebpackPlugin({
      title: "About",
      template: "./src/index.html",
      filename: "about.html" 
    }),
    new HtmlWebpackPartialsPlugin({
      path: "./src/html_templates/about.html",
      location: "main"
    }),
    new HtmlWebpackPlugin({
      title: "Contact",
      template: "./src/index.html",
      filename: "contact.html"
    }),
    new HtmlWebpackPartialsPlugin({
      path: "./src/html_templates/contact.html",
      location: "main"
    })
  ]

As I have it, it simply add the last template path: "./src/html_templates/contact.html" for both about.html and contact.html

colbyfayock commented 6 years ago

I actually haven't tried this use case with two different templates, I'm going to guess that's not currently supported. I'm away for the weekend but I'll check this out when I'm back mid next week

colbyfayock commented 6 years ago

hey @stefanomonteiro - I actually got this working. check out an example here: https://github.com/colbyfayock/html-webpack-partials-plugin/tree/master/examples/basic-multi

Note: you need to specify both of the partial configs after the HtmlWebpackPlugin instances like shown in the example link I sent.

Can you let me know if this works now for your use case?

stefanomonteiro commented 6 years ago

Hi @colbyfayock,

Thank you very much for the quick responses. Unfortunately, this is not exactly what I was trying to achieve. I will try and explain myself better now. My apologies in advance if I don't again.

Basically, you added two partials in the same template and output them in the same file and the same partials were added to every instance of HtmlWebpackPlugin(). What I meant to do was to add a specific partial to a specific instance of HtmlWebpackPlugin() using the same template.

Here is why:

I am building a multipage website using html. But let's create a simpler version () where we have two pages only, homepage and about page. Because the head, as well as the navbar and footer, will be the same for everypage I tought of creating a ie. main.html add the head, navbar and footer. And separetely, in the pages folder, create homepage.html and about.html where in each of these two add the relevant and the specific content for each page only.

└── src
    ├── main.html
    └── pages
        ├── about.html
        └── homepage.html

Our main.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <nav>Navbar</nav>

    <main>
        <!-- Here goes the page content from either pages/homepage.html or pages/about.html using html-webpack-partials-plugin-->
    </main>

    <footer>Footer</footer>
</body>

</html>

src/homepage.html

<h1>Homepage</h1>

src/about.html

<h1>About page</h1>

So, I thought of using html-webpack-plugin and html-webpack-partials-plugin and have the following output.

├── dist
│   ├── about.html
│   └── index.html
└── src
    ├── main.html
    └── pages
        ├── about.html
        └── homepage.html

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        Homepage
    </title>
</head>

<body>
    <nav>Navbar</nav>

    <main>
        <h1>Homepage</h1>
    </main>

    <footer>Footer</footer>
</body>

</html>

dist/about.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        About 
    </title>
</head>

<body>
    <nav>Navbar</nav>

    <main>
        <h1>About Page</h1>
    </main>

    <footer>Footer</footer>
</body>

</html>

Hope this can be achieved. Thanks again for the help.

stefanomonteiro commented 6 years ago

Hi @colbyfayock,

I believe I managed to make it work. I pretended I was a JS expert and decided to dig in into the plugin files. :)

In partial.js

I added this.applyTo = settings.applyTo; in the consturctor (line 15)

class Partial {
  constructor(settings = {}) {
    this.path = settings.path;
    this.location = settings.location || "body";
    this.priority = settings.priority || "low";
    this.applyTo = settings.applyTo;
    this.should_inject =
      typeof settings.inject === "undefined" ? true : !!settings.inject;
    this.options = Object.assign({}, settings.options);
  }

In index.js

I wrapped data.html = injectPartial() with an if statement:

// Finally inject the partial into the HTML stream
              if (data.outputName === partial.applyTo) {
                data.html = injectPartial(data.html, {
                  options: partial.options,
                  html: partial.template(partial.options),
                  priority: partial.priority,
                  location: partial.location
                });
              }

In webpack.config.js

new HtmlWebpackPartialsPlugin([
      {
        path: path.join(__dirname, "./src/templates/about.html"),
        applyTo: "about.html"
      },
      {
        path: path.join(__dirname, "./src/templates/hello.html"),
        template_filename: "other-page.html",
        applyTo: "hello.html"
      }
    ])

I will run a further test to see if it is all as it should and let you know. But, so far and for what I was trying to achieve it is working well.

colbyfayock commented 6 years ago

Cool, thanks for digging in. I think I get the full picture now, but I'll be able to take a better look tomorrow night or Wednesday, and see if I can get they squared away for you in the package itself. Glad you got it moving though.

stefanomonteiro commented 6 years ago

Appreciate the support. Let me know if I can help with something. It'll be a pleasure to give back somehow.

colbyfayock commented 6 years ago

sorry - forgot to get back to this last night, I'll look at it today. Feel free to submit a pull request if you'd like! if you do that I can review and make any additional tweaks I needed after :)

colbyfayock commented 6 years ago

Okay, check this out. I think it mostly was working "as is", but I added the ability to pass a wildcard in to the template_filename so it could match any file. This example should give you your wrapper (main) shared template with a shared navigation and footer. Let me know if this is what you were thinking!

https://github.com/colbyfayock/html-webpack-partials-plugin/tree/master/examples/page-template

stefanomonteiro commented 6 years ago

Sorry, I've been in the WordCamp this last weekend. At first glance, it seems that it works. I will make some tests tho.

colbyfayock commented 6 years ago

no worries! let me know when you get a chance

colbyfayock commented 6 years ago

@stefanomonteiro how are we looking?

stefanomonteiro commented 6 years ago

Hey @colbyfayock. It works well in the example. I would need to restructure my projects file to make it work. Thanks

colbyfayock / html-webpack-partials-plugin

Multiple HtmlWebpackPartialsPlugin() #2