Best way to minify html literals inside javascript

I have a small node app using webpack and babel to render the production JS.
In the source JS I have some HTML literals like this e. g.:

breadcrumbsElement.innerHTML = `
        <ul class="breadcrumb mr-breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">HostShop</a>
            </li>
            ${breadcrumbLabel ? `
            <li class="breadcrumb-item">
                <span>${breadcrumbLabel}</span>
            </li>` : ''}
        </ul>
    `;

However when I run build it renders as:

r.innerHTML = `ntt<ul class="breadcrumb mr-breadcrumb">nttt<li class="breadcrumb-item">ntttt<a href="/">HostShop</a>nttt</li>nttt${t ? `nttt<li class="breadcrumb-item">ntttt<span>${t}</span>nttt</li>` : ""}ntt</ul>nt`;

The useless whitespaces are encoded and preserved for some reason.

I tried few popular tools such as terser, babel but without luck.

What’s the best approach to minify this?