Make webpack output closer to webpack 4 and fix whitelabelling (#18238)

* Make webpack output closer to webpack 4 and fix whitelabelling

* Fix recently-viewed.cy.spec.js

Not sure why it's started failing with this PR, but adding wait for text.

frontend/test/metabase/scenarios/onboarding/search/recently-viewed.cy.spec.js

@@ -15,6 +15,7 @@ describe(`search > recently viewed`, () => {
 
     // "Orders in a dashboard" dashboard
     cy.visit("/dashboard/1");
+    cy.findByText("Product ID");
 
     // inside the "Orders in a dashboard" dashboard, the order is queried again,
     // which elicits a ViewLog entry

webpack.config.js

@@ -127,7 +127,13 @@ const config = (module.exports = {
 
   optimization: {
     splitChunks: {
-      chunks: "all",
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          chunks: "all",
+          name: "vendor",
+        },
+      },
     },
   },
 
@@ -135,8 +141,8 @@ const config = (module.exports = {
     // Extracts initial CSS into a standard stylesheet that can be loaded in parallel with JavaScript
     // NOTE: the filename on disk won't include "?[chunkhash]" but the URL in index.html generated by HtmlWebpackPlugin will:
     new MiniCssExtractPlugin({
-      filename: devMode ? "[name].css" : "[name].[contenthash].css",
-      chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
+      filename: devMode ? "[name].css" : "[name].css?[contenthash]",
+      chunkFilename: devMode ? "[id].css" : "[id].css?[contenthash]",
     }),
     new HtmlWebpackPlugin({
       filename: "../../index.html",
@@ -144,6 +150,8 @@ const config = (module.exports = {
       chunks: ["vendor", "styles", "app-main"],
       template: __dirname + "/resources/frontend_client/index_template.html",
       inject: "head",
+      // Using default of "defer" creates race-condition when applying whitelabel colors (metabase#18173)
+      scriptLoading: "blocking",
       alwaysWriteToDisk: true,
     }),
     new HtmlWebpackPlugin({
@@ -152,6 +160,7 @@ const config = (module.exports = {
       chunks: ["vendor", "styles", "app-public"],
       template: __dirname + "/resources/frontend_client/index_template.html",
       inject: "head",
+      scriptLoading: "blocking",
       alwaysWriteToDisk: true,
     }),
     new HtmlWebpackPlugin({
@@ -160,6 +169,7 @@ const config = (module.exports = {
       chunks: ["vendor", "styles", "app-embed"],
       template: __dirname + "/resources/frontend_client/index_template.html",
       inject: "head",
+      scriptLoading: "blocking",
       alwaysWriteToDisk: true,
     }),
     new HtmlWebpackHarddiskPlugin({