Ensure script tags appear in git diffs (#8992)

* Ensure script tags appear in git diffs

* Adjust for electron

packages/apps-electron/webpack.renderer.cjs

@@ -28,7 +28,11 @@ module.exports = merge(
       }),
       new HtmlWebpackPlugin({
         PAGE_TITLE: 'Polkadot/Substrate Portal',
-        inject: true,
+        // see index.html for the work needed to support this,
+        // aka manually injection without minification
+        // (also in apps/webpack.config.js)
+        inject: false,
+        minify: false,
         template: path.join(context, '../apps/public/index.html')
       })
     ],

packages/apps/public/index.html

@@ -58,7 +58,7 @@
         --border-input: rgba(234, 236, 238, .15);
         --border-table: #343536;
         --border-tabs: #343536;
-        /* --color-checkbox: rgba(78, 78, 78, 0.66); */
+        --color-checkbox: rgba(78, 78, 78, 0.66);
         --color-error: rgba(255, 83, 83, 0.8);
         /* --color-header: rgba(244, 242, 240, 0.8); */
         /* --color-label: rgba(244, 242, 240, 0.45); */
@@ -81,9 +81,9 @@
         --bg-sidebar: #fafafa;
         --bg-static-extra: rgba(200, 200, 200, 0.1);
         --border-input: rgba(34, 36, 38, .15);
-        --border-table: #efedeb; /* #f1efed; */
+        --border-table: #efedeb;
         --border-tabs: #f1efed;
-        /* --color-checkbox: rgba(34, 36, 38, 0.15); */
+        --color-checkbox: rgba(34, 36, 38, 0.15);
         --color-error: rgba(139, 0, 0);
         /* --color-header: rgba(78, 78, 78, 0.8); */
         /* --color-label: rgba(78, 78, 78, 0.66); */
@@ -93,8 +93,7 @@
         --color-text: rgba(78, 78, 78, 0.8); /* 1 */
         --opacity-gray: 0.75;
       }
-    </style>
-    <style>
+
       .--absolute {
         position: absolute;
       }
@@ -119,6 +118,14 @@
         opacity: 0.15;
       }
     </style>
+    <!--
+      Manually output the head tags individually to gain newlines to
+      helps us with git diffs not getting out of hand. This file is
+      therefore also not being minimized, but that _should_ be ok.
+
+      https://stackoverflow.com/a/62992909
+    --><% for (const tag of htmlWebpackPlugin.tags.headTags) { %>
+    <%= tag %><% } %>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

packages/apps/webpack.base.cjs

@@ -98,7 +98,10 @@ function createWebpack (context, mode = 'production') {
       __filename: false
     },
     optimization: {
+      chunkIds: 'deterministic',
+      concatenateModules: true,
       minimize: mode === 'production',
+      moduleIds: 'deterministic',
       runtimeChunk: 'single',
       splitChunks: {
         cacheGroups: [

packages/apps/webpack.config.cjs

@@ -23,7 +23,11 @@ module.exports = merge(
       new SubresourceIntegrityPlugin(),
       new HtmlWebpackPlugin({
         PAGE_TITLE: 'Polkadot/Substrate Portal',
-        inject: true,
+        // see index.html for the work needed to support this,
+        // aka manually injection without minification
+        // (also in apps-electron/webpack.renderer.js)
+        inject: false,
+        minify: false,
         template: path.join(context, `${hasPublic ? 'public/' : ''}index.html`)
       })
     ]