Merge remote-tracking branch 'origin/main' into w2p-90978_Improve-initial-page-load_PR

webpack/webpack.browser.ts

@@ -8,9 +8,6 @@ const zlib = require('zlib');
 
 module.exports = Object.assign({}, commonExports, {
   target: 'web',
-  node: {
-    module: 'empty'
-  },
   plugins: [
     ...commonExports.plugins,
     new CompressionPlugin({
@@ -34,8 +31,9 @@ module.exports = Object.assign({}, commonExports, {
     }),
   ],
   devServer: {
-    before(app, server) {
+    setupMiddlewares(middlewares, server) {
       buildAppConfig(join(process.cwd(), 'src/assets/config.json'));
+      return middlewares;
     }
   }
 });

webpack/webpack.common.ts

@@ -2,8 +2,7 @@ import { globalCSSImports, projectRoot } from './helpers';
 
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
+const sass = require('sass');
 
 export const copyWebpackOptions = {
   patterns: [
@@ -20,11 +19,10 @@ export const copyWebpackOptions = {
       // replace(/\\/g, '/') because glob patterns need forward slashes, even on windows:
       // https://github.com/mrmlnc/fast-glob#how-to-write-patterns-on-windows
       from: path.join(__dirname, '..', 'src', 'themes', '*', 'assets', '**', '*').replace(/\\/g, '/'),
-      to: 'assets',
       noErrorOnMissing: true,
-      transformPath(targetPath, absolutePath) {
+      to({ absoluteFilename }) {
         // use [\/|\\] to match both POSIX and Windows separators
-        const matches = absolutePath.match(/.*[\/|\\]themes[\/|\\]([^\/|^\\]+)[\/|\\]assets[\/|\\](.+)$/);
+        const matches = absoluteFilename.match(/.*[\/|\\]themes[\/|\\]([^\/|^\\]+)[\/|\\]assets[\/|\\](.+)$/);
         if (matches) {
           // matches[1] is the theme name
           // matches[2] is the rest of the path relative to the assets folder
@@ -40,16 +38,21 @@ export const copyWebpackOptions = {
   ]
 };
 
-const SCSS_LOADERS = [{
-  loader: 'postcss-loader',
-  options: {
-    sourceMap: true
-  }
-},
+const SCSS_LOADERS = [
+  {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: true
+    }
+  },
   {
     loader: 'sass-loader',
     options: {
       sourceMap: true,
+      // sass >1.33 complains about deprecation warnings in Bootstrap 4
+      // After upgrading to Angular 12 we need to explicitly use an older version here
+      // todo: remove after upgrading to Bootstrap 5
+      implementation: sass,
       sassOptions: {
         includePaths: [projectRoot('./')]
       }
@@ -60,14 +63,6 @@ const SCSS_LOADERS = [{
 export const commonExports = {
   plugins: [
     new CopyWebpackPlugin(copyWebpackOptions),
-    new HtmlWebpackPlugin({
-      template: projectRoot('./src/index.html', ),
-      output: projectRoot('dist'),
-      inject: 'head'
-    }),
-    new ScriptExtPlugin({
-      defaultAttribute: 'defer'
-    })
   ],
   module: {
     rules: [
@@ -99,5 +94,5 @@ export const commonExports = {
         ]
       },
     ],
-  }
+  },
 };

webpack/webpack.test.ts

@@ -2,7 +2,4 @@ import { commonExports } from './webpack.common';
 
 module.exports = Object.assign({}, commonExports, {
   target: 'web',
-  node: {
-    module: 'empty'
-  }
 });