Add webpack-html-plugin support

[muuki88]

This commit adds support for the html-webpack-plugin. It compiles the handlebar templates after the html-webpack-plugin hooks have been triggered. This allows users to generate handlebar partials with the html-webpack-plugin that can later be consumed by the handlebars-wepback-plugin.

[sagold]

Hi muuki.

Thanks for sharing your feature. I will test this before on develop before publishing on master.

Cheers. sagold

[muuki88]

Awesome 🤩 This is actually my first contribution to a webpack plugin, so I'm not 💯% sure if this solution is actually a good approach ☺️

[sagold]

I am not sure either. It is fine with me, if it works. Until we know better.

I wonder why you changed the hooks in your second commit baf739a57374b4bdc6be12d805496250a5b0aad3. Using the first commit, it works as expected. With your second commit handlebars is never called. As i see it, you need to tap into the htmlWebpackPlugin and start the compilation afterwards (first version). With the second commit handlebars ist tapped to the htmlWebpackPlugin after emitting its own files, which is the wrong order.

[muuki88]

Thanks for the explanation. I'm still a bit confused by these hooks. My understanding was that the first string parameter is the name of the plugin that taps into some other plugin's hook. And the property describes the state when the other plugin fires an event.

Should I revert the second commit or can you simply cherry pick the first one?

[sagold]

I see the problem now. The first version does only compile, if the html generated partial does already exist. I opened a new branch to work with. I am not sure though, how much time i want to spend on it today.

There are some primers:

• https://webpack.js.org/api/plugins/#custom-hooks
• https://github.com/jantimon/html-webpack-plugin#events

but they are not easy to comprehend without an unterstanding of webpacks execution order.

[muuki88]

Thanks for the resources. I read those and had the exact issue you mentioned 😅 hard to comprehend if one is not familiar with webpack's execution order.

No pressure 🤗 this is open source and we all do this in our free time. Thanks for taking your time to work in this peace of code 💖

[sagold]

As an alternative, the following seems to work for a single HTMLWebpackPlugin (There may be many)

if (this.options.htmlWebpackPlugin) {

  compiler.hooks.compilation.tap("HtmlWebpackPluginHooks", (compilation) => {

    compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap("HandlebarsRenderPlugin", (data) => {
      Handlebars.registerPartial(`html/${data.outputName.replace(".hbs", "")}`, data.html);
    });

    compilation.hooks.htmlWebpackPluginAfterEmit.tapAsync("HandlebarsRenderPlugin", (asset, done) => {
      compile(compilation, done);
    });
  });

  compiler.hooks.emit.tapAsync("HandlebarsRenderPlugin", emitDependencies);

} else {

It is quite hacky and still needs the correct event for the hbs compile function. But i think this goes into the right direction.

[muuki88]

This works pretty well! Should I open another pull request for this? Or do you change this on develop directly

[sagold]

Hi muuki.

I have a working draft on the branch, that supports multiple html-webpack-plugins, the webpack-dev-server and reloads on changing file contents. It seems that generating and emitting files in the emit-cycle is fine. This ensures that the html-webpack-plugins have finished creating all the required partials. My curiosity ends here :).

You can either start from here or the given branch and open a new PR for any missing changes or errors on my side.

[muuki88]

You are awesome :)