Update to webpack 5, frontend-components-config 4, patternfly current (…

…ansible#742)

* package.json: sort .scripts

many scripts now, sort by name
no other changes

* package.json: update dependencies, devDependencies

the point is to update to webpack5, but it depends on and is depended on by redhat cloud services
and patternfly needs new webpack, while new sass needs new patternfly
and webpack needs loaders
the rest is minor
(not updating husky - newer versions don't autoinstall)

* webbpackConfig.serve -> webpackConfig.devServer

* fonts: use type: asset/resource instead of file-loader

* @redhat-cloud-services/frontend-components*: fix import paths

* add missing style-loader

used in production

* switch style-loader and mini-css-extract-plugin around

style-loader:
  css ends up in js bundles, about 2x as big
  takes about half the time to run

mini-css-extract-plugin:
  css ends up in dist/css, about half the size
  takes about 2x longer

given that, we care more about size in production and more about speed in development,
switching around :)

+ ensure only css, sass and scss are treated as css-like

* .babelrc: add typescript plugin, use for .js, .jsx, .ts, .tsx

lingui relies on babel to transform the code, so we need babel to understand typescript
this also allows us to use proper typescript as a linter, independent of the compiler
and it speeds up the dev build by a factor of ~2

also removed plugin-proposal-object-rest-spread and plugin-proposal-class-properties as they are part of preset-env now

* webpack watchOptions: ignore vim swapfiles when watching

* get_human_size: unmark string, fixed in ansible#810

babel uses a different compile order and get_human_size.ts and paths.ts are 2 files which need _ at module load time
810 adds the lingui helper, so, this is just temporary

* package.json: add lint:ts, runs tsc; add skipLibCheck

skipLibCheck typescript config is needed because typescript fails on 89 node_modules/@types/webpack/index.d.ts errors

seems to be a conflict between new typescript (4.3.5, current)
and old @types/webpack, temporary problem because it's a dep of frontend-components-config

└─┬ @redhat-cloud-services/frontend-components-config@4.3.3
  └─┬ clean-webpack-plugin@3.0.0
    └── @types/webpack@4.41.30

* remove devServer override, the original works better in dev

handles index redirect and publicPath

and thus no need for common.webpack, as the last import was the path

* add fork-ts-checker-webpack-plugin

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

the plugin runs typescript for type checking during the compilation,
it's not fatal in development (changes will apply despite the errors),
it is fatal in production (dist/ won't get emitted when there are errors)

(cherry picked from commit 9f88cbc)

.babelrc

@@ -1,14 +1,12 @@
 {
     "presets": [
-        "@babel/env",
-        "@babel/react",
-        "@babel/flow"
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript",
     ],
     "plugins": [
-        "@babel/plugin-transform-runtime",
         "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-proposal-class-properties",
-        "lodash"
+        "@babel/plugin-transform-runtime",
+        "babel-plugin-lodash",
     ]
 }

config/webpack-ts-overrides.js

@@ -1,53 +1,28 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { resolve } = require('path');
 
+const isBuild = process.env.NODE_ENV === 'production';
+
 module.exports = {
   devtool: 'source-map',
   module: {
     rules: [
       {
-        test: /src\/.*\.js$/,
-        exclude: /(node_modules|bower_components)/i,
+        test: /src\/.*\.(js|jsx|ts|tsx)$/,
         use: [{ loader: 'source-map-loader' }, { loader: 'babel-loader' }],
       },
       {
-        test: /\.s?[ac]ss$/,
+        test: /\.(css|scss|sass)$/,
         use: [
-          process.env.NODE_ENV === 'production'
-            ? 'style-loader'
-            : MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'sass-loader',
-          },
+          isBuild ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader',
+          'sass-loader',
         ],
       },
       {
         test: /\.(woff(2)?|ttf|jpg|png|eot|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[name].[ext]',
-              outputPath: 'fonts/',
-            },
-          },
-        ],
-      },
-
-      // TypeScript configs
-      // changed from { test: /\.jsx?$/, use: { loader: 'babel-loader' } },
-      {
-        test: /src\/.*\.(t|j)sx?$/,
-        loader: 'ts-loader',
-      },
-      // addition - add source-map support
-      {
-        enforce: 'pre',
-        test: /src\/.*\.js$/,
-        loader: 'source-map-loader',
+        type: 'asset/resource',
+        generator: { filename: 'fonts/[name][ext][query]' },
       },
     ],
   },
@@ -59,4 +34,7 @@ module.exports = {
       src: resolve(__dirname, '../src'),
     },
   },
+  watchOptions: {
+    ignored: ['**/.*.sw[po]'],
+  },
 };

config/webpack.base.config.js

@@ -2,8 +2,8 @@
 const { resolve } = require('path');
 const config = require('@redhat-cloud-services/frontend-components-config');
 const TSOverrides = require('./webpack-ts-overrides');
-const commonWPconfig = require('./common.webpack.js');
 const webpack = require('webpack');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 // NOTE: This file is not meant to be consumed directly by weback. Instead it
 // should be imported, initialized with the following settings and exported like
@@ -72,26 +72,6 @@ module.exports = inputConfigs => {
     port: customConfigs.UI_PORT,
   });
 
-  webpackConfig.serve = {
-    content: commonWPconfig.paths.public,
-
-    // defines port for prod server
-    port: customConfigs.UI_PORT,
-
-    // https://github.com/webpack-contrib/webpack-serve/blob/master/docs/addons/history-fallback.config.js
-    add: app => app.use(convert(history({}))),
-  };
-
-  if (customConfigs.TARGET_ENVIRONMENT === 'prod') {
-    webpackConfig.serve.prod = {
-      publicPath: commonWPconfig.paths.publicPath,
-    };
-  } else {
-    webpackConfig.serve.dev = {
-      publicPath: commonWPconfig.paths.publicPath,
-    };
-  }
-
   // Override sections of the webpack config to work with TypeScript
   const newWebpackConfig = {
     ...webpackConfig,
@@ -111,12 +91,12 @@ module.exports = inputConfigs => {
     console.log('Overriding configs for standalone mode.');
 
     const newEntry = resolve(__dirname, '../src/entry-standalone.tsx');
-    const newPubPath = '/';
     console.log(`New entry.App: ${newEntry}`);
     newWebpackConfig.entry.App = newEntry;
   }
 
   plugins.push(new webpack.DefinePlugin(globals));
+  plugins.push(new ForkTsCheckerWebpackPlugin());
 
   return {
     ...newWebpackConfig,