preact-cliにてtemplate.htmlをカスタマイズするに当たりhtmlWebpackPlugin.options.ssrより前にsprictを書くとDOMの書き換えが一部動作しない事例

駄目

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title><%= htmlWebpackPlugin.options.title %></title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
       <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
           <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
       <% } %>
       <% for (var chunk of webpack.chunks) { %>
        <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
           <% for (var file of chunk.files) { %>
               <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
                   <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
               <% } else if (file.match(/manifest\.json$/)) { %>
                   <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
               <% } %>
           <% } %>
       <% } %>
   </head>
    <body>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
        <%= htmlWebpackPlugin.options.ssr({
            url: '/'
        }) %>
        <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
        <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
    </body>
</html>

良い

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title><%= htmlWebpackPlugin.options.title %></title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
       <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
           <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
       <% } %>
       <% for (var chunk of webpack.chunks) { %>
        <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
           <% for (var file of chunk.files) { %>
               <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
                   <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
               <% } else if (file.match(/manifest\.json$/)) { %>
                   <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
               <% } %>
           <% } %>
       <% } %>
   </head>
    <body>
        <%= htmlWebpackPlugin.options.ssr({
            url: '/'
        }) %>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
        <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
        <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
    </body>
</html>