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>