dev: fix the React Material and Vanilla example dev setup

We recently updated Typescript. The new version is incompatible to our
(pretty old) webpack dev-server setup.

We now update Webpack throughout the whole repository, fixing the
webpack dev-server setup in the process.

package.json

@@ -43,12 +43,12 @@
     "source-map-loader": "^0.2.4",
     "source-map-support": "0.5.16",
     "style-loader": "^1.0.1",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.4.0",
     "tslib": "^2.5.0",
     "typescript": "~4.9.5",
-    "webpack": "^4.41.2",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.78.0",
+    "webpack-merge": "^5.10.0"
   },
   "pnpm": {
     "overrides": {

packages/angular-material/package.json

@@ -130,7 +130,7 @@
     "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
     "rxjs": "^6.6.0",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^9.5.1",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
     "typescript": "~4.9.5",

packages/material-renderers/package.json

@@ -38,7 +38,7 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "build:examples-app": "rollup -c rollup.example.config.js",
-    "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
+    "dev": "webpack-dev-server --config webpack/webpack.dev.js --env=dev",
     "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
@@ -134,12 +134,12 @@
     "rollup-plugin-visualizer": "^5.4.1",
     "source-map-loader": "^0.2.4",
     "ts-jest": "^27.1.4",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^9.5.1",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
     "typescript": "~4.9.5",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.9.0"
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }

packages/material-renderers/webpack/webpack.dev.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const merge = require('webpack-merge').merge;
 const baseConfig = require('../../../webpack/webpack.dev.base.js');
 var copyWebpackPlugin = require('copy-webpack-plugin');
 

packages/vanilla-renderers/package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "build:examples-app": "rollup -c rollup.example.config.js",
-    "dev": "webpack --config ./webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
+    "dev": "webpack-dev-server --config webpack/webpack.dev.js --env=dev",
     "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
@@ -88,13 +88,13 @@
     "source-map-loader": "^0.2.4",
     "source-map-support": "0.5.16",
     "ts-jest": "^27.1.4",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.4.0",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.9.0"
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "jest": {
     "moduleFileExtensions": [

packages/vanilla-renderers/webpack/webpack.dev.js

@@ -1,4 +1,4 @@
-const merge = require('webpack-merge');
+const merge = require('webpack-merge').merge;
 const baseConfig = require('../../../webpack/webpack.dev.base.js');
 var copyWebpackPlugin = require('copy-webpack-plugin');