Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inject favicons tags into custom position using ejs template

See original GitHub issue

For example:

<head>
    <!-- Seo Tags from Google, Facebook, Twitter, etc-->
    <%- htmlWebpackPlugin.files.favicons.html %>
    <!-- script tags from Google Analytics, etc -->
</head>

Output:

<head>
    <!-- Seo Tags from Google, Facebook, Twitter, etc-->
    <link rel="icon" href="...">
    <meta name="..." content="...">
    <!-- etc -->
    <!-- script tags from Google Analytics, etc -->
</head>
</head>

Issue Analytics

State:
Created 4 years ago
Comments:24 (4 by maintainers)

Top GitHub Comments

2reactions

CoderAmigocommented, Nov 25, 2019

Hi Eddy, I managed to solve this problem!

By creating a micro plugin using hooks.

It was required to use webapp-webpack-plugin, this fork favicons-webpack-plugin with implemented support for the hook webappWebpackPluginBeforeEmit, but, unfortunately, without options mode and devMode.

Jan, Bruno, if you are reading this, please give the opportunity to inject it into a custom template from the box or add support for hooks to FaviconsWebpackPlugin or the devMode option in the fork. Bad that you have to use crutches =(

The crutch itself: (set below new HtmlWebpackPlugin({ ... }) and below new WebappWebpackPlugin({ ... }))

new (class WebappTransponderWebpackPlugin {
    apply(compiler) {
        let iconsTags = [];
        compiler.hooks.make.tap("WebappTransponderWebpackPlugin", (compilation) => {
            compilation.hooks.webappWebpackPluginBeforeEmit.tapAsync("WebappTransponderWebpackPlugin", (data, cb) => {
                iconsTags = data.tags.map((tag) => {
                    return {
                        tagName: tag.slice(1, tag.indexOf(' ')),
                        tagAttributes: tag.slice(tag.indexOf(' ') + 1, -2).split('" ').map((attr) => {
                            attr = attr.split('="');
                            return { attrName: attr[0], attrValue: attr[1] };
                        })
                    };
                });
                return cb(null, data);
            });
            compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync('WebappTransponderWebpackPlugin', (data, cb) => {
                data.assets.favicons = (data.assets.favicons || []).concat(iconsTags);
                return cb(null, data);
            });
        });
    }
})()

Add in your .ejs template:

<% if (Array.isArray(htmlWebpackPlugin.files.favicons)) {
  for (var item of htmlWebpackPlugin.files.favicons) { %>
<<%= item.tagName %><% for (var item of item.tagAttributes) { %> <%= item.attrName %>="<%= item.attrValue %>"<% } %>><%
  }
} %>

Only works with webapp-webpack-plugin use new WebappWebpackPlugin ({ otions... }).

Explanations:

Why are html lincs parsed? The first reason, for greater total flexibility, is the ability to calculate the functional by adding modifications to the inserted html tags. The second reason, I tried to get link icon tags in the form of an object with parameters, from compilation.hooks.webappWebpackPluginBeforeEmit.tap..., but there only files names and files themselves are the Buffer object, everything else: tag name, path, media data, etc. only in the form of already assembled html.

This is my first experience in creating the use of webpack hooks and in general the first experience of writing a plugin for webpack, so I could not do everything absolutely right, but everything works! For example, I have a suspicion that I am transferring incorrect names to hooks -> tap, although in this case it does not affect anything.

1reaction

jantimoncommented, Nov 2, 2020

Thanks for the update 😃