brunocodutra/webapp-webpack-plugin

Raw HTML output for links?

khalwat opened this issue · 8 comments

khalwat commented

I have your fantastic plugin up and working with html-webpack-plugin@next, thank you! The only issue I'm having is I'd like to be able to extra the raw HTML output for the links.

Currently, if I specific outputTemplate: '' in the html-webpack-plugin nothing gets injected at all; it looks like it's specifically looking for the <head></head> tags for the injection.

Even if I set inject: 'force', it won't inject anything unless there is a <head></head> tag pair present, which unfortunately for my use-case is problematic.

brunocodutra commented

Interesting, what is the expected behavior in this case?

This should be a problem even for the current version of html-plugin, could you try reproducing?

khalwat commented

Looks like the issue is here:

https://github.com/brunocodutra/webapp-webpack-plugin/blob/html-webpack-plugin-4/src/index.js#L49

If we did something like this:

                const result = tags.join('');
                if (htmlPluginData.html.includes('<\/head>')) {
	                htmlPluginData.html = htmlPluginData.html.replace(/(<\/head>)/i, result + '$&');
                } else {
                 	htmlPluginData.html += result;
                }

...if there is a </head> tag, then the current behavior happens. If there is not, it just appends the result.

The use-case here is that I'm integrating it with a CMS system that handles its own rendering; having html-webpack-plugin inject it into that CMS's templates would get messy.

So instead I want to generate a raw HTML file (by passing in templateContent: '') that the CMS can include instead.

Interestingly, html-webpack-plugin actually works in this scenario, if it can't find a <head></head> it outputs injected links anyway.

BTW, the same issue exists with the current master branch as well; it too is just looking for </head>, and if it doesn't exist, it exits without injecting/adding the links.

khalwat commented

This would do the trick, too:

                  const result = tags.join('');
                  let position = htmlPluginData.html.search(/<\/head>/i);
                  position = position === -1 ? htmlPluginData.html.length : position;
                  htmlPluginData.html = [htmlPluginData.html.slice(0, position), result, htmlPluginData.html.slice(position)].join('');

...and has the benefit of not being case-sensitive.

brunocodutra commented

I see, would you be interested in creating a PR to fix that?

khalwat commented

Sure, I'll do that against the html-webpack-plugin-4 branch.

brunocodutra commented

Closed by #137