template.ejs

<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8">
    <base href = "<%= htmlWebpackPlugin.options.baseUrl %>" />
    <title>Flicker Fun</title>


    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    <script defer>
      console.log('adding event listenr');
      document.addEventListener("DOMContentLoaded", function() {

        let lazyloadThrottleTimeout;

        function lazyload () {
          let lazyloadImages = $("img.lazy");
          if(lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
          }

          lazyloadThrottleTimeout = setTimeout(function() {
            let scrollTop = window.pageYOffset;

            lazyloadImages.each(function(i, img) {
              if(img.offsetTop < (window.innerHeight + scrollTop)) {
                img.src = img.dataset.src;
                img.classList.remove('lazy');
              }
            });
          }, 20);
        }

        $(window).scroll(lazyload);
        $(window).resize(lazyload);
      });
    </script>
  </head>
  <body>
        <div id="root"></div>
        <% for (key in htmlWebpackPlugin.files.js) { %><script type="text/javascript" src="/<%= htmlWebpackPlugin.files.js[key] %>/"></script><% } %>


        <a style="display: none" href="https://smallseotools.com/visitor-hit-counter/" target="_blank" title="smallseotools counter for traffic" rel="nofollow noopener"><img src="https://smallseotools.com/counterDisplay?code=d907e5aa552fbc59c27cc6cf1f25dfb9&style=0001&pad=5&type=ip&initCount=1" alt="smallseotools counter for traffic" border="0"></a>
  </body>
</html>