Upgrade from webpack v4 to v5

.github/workflows/mainui.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '18.x'
 
       - name: Cache node modules
         id: cache
@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '12.x'
+          node-version: '18.x'
 
       - name: Cache node modules
         id: cache

README.md

@@ -56,11 +56,12 @@ You find the following repository structure:
 
 In most cases, you **don't** need a Java development environment for UI development.
 
-Instead, make sure you have NodeJS 16.14 (HABot: 12.16) or later and npm 8.6 (HABot: 6.14) or later installed.
+Instead, you need NodeJS and npm installed, you'll learn about the required versions later.
 
-
-Then identify in the `bundles` directories where the frontend code is - for instance, for the main UI it is `bundles/org.openhab.ui/web/`.
-Then follow the instructions in the specific add-on's `CONTRIBUTING.md` file to get started. In the main UI's case, it is located in [bundles/org.openhab.ui/CONTRIBUTING.md](https://github.com/openhab/openhab-webui/blob/master/bundles/org.openhab.ui/CONTRIBUTING.md). In many cases it will involve executing some `npm` commands to install dependencies and start a development server.
+Then identify in the `bundles` directories where the frontend code is - for instance, for the Main UI it is `bundles/org.openhab.ui/web/`.
+Then follow the instructions in the specific add-on's `CONTRIBUTING.md` file to get started, e.g. install the correct versions of NodeJS and npm.
+For Main UI, it is located in [bundles/org.openhab.ui/CONTRIBUTING.md](https://github.com/openhab/openhab-webui/blob/master/bundles/org.openhab.ui/CONTRIBUTING.md).
+In many cases it will involve executing some `npm` commands to install dependencies and start a development server.
 
 However, if you want to compile the final `.jar` add-ons, we have assembled some step-by-step guides for different IDEs on our developer documentation website:
 

bundles/org.openhab.ui.basic/CONTRIBUTING.md

@@ -1,6 +1,10 @@
 ## Contributing
 
-Javascript linting, compressing and LESS compilation is handled through Gulp. Therefore, please run `gulp` instead of changing compressed CSS/JS manually. Default Gulp task will also check the code using ESLint.
+You need NodeJS 18.17.0 or later and npm 9.8.1 or later installed.
+
+Javascript linting, compressing and LESS compilation is handled through Gulp.
+Therefore, please run `gulp` instead of changing compressed CSS/JS manually.
+Default Gulp task will also check the code using ESLint.
 
 Installing build dependencies:
 

bundles/org.openhab.ui.habot/CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing to HABot
+
+You need NodeJS 12.16 or later and npm 6.14 or later installed.

bundles/org.openhab.ui.habpanel/CONTRIBUTING.md

@@ -14,8 +14,10 @@ redirect you, if necessary.
 
 ## Build Environment
 
-It is assumed you have ```npm```, ```bower``` and ```gulp``` available; if not,
-check their respective docs.
+You need NodeJS 16.14 or later and npm 8.6 or later installed.
+
+It is assumed you have `npm`, `bower` and `gulp` available;
+if not, check their respective docs.
 
 To build the Javascript part of HABPanel, navigate to the ```web/``` subfolder, then:
 1. Run ```npm install```

bundles/org.openhab.ui/CONTRIBUTING.md

@@ -8,7 +8,9 @@ The repository for web user interfaces, including this project, is located at <h
 
 This project is built using [Vue.js](https://vuejs.org/), [webpack](https://webpack.js.org/) and [Framework7](https://framework7.io).
 
-You need Node 16.14.0 or later and npm 8.6.0. Change to the `web` directory, gather the necessary dependencies with `npm install` then the scripts below will be available.
+You need Node 18.18.0 or later and npm 9.8.1 or later installed.
+
+Change to the `web` directory, gather the necessary dependencies with `npm install` then the scripts below will be available.
 
 ## NPM Scripts
 

bundles/org.openhab.ui/pom.xml

@@ -37,8 +37,8 @@
         <artifactId>frontend-maven-plugin</artifactId>
 
         <configuration>
-          <nodeVersion>v16.14.2</nodeVersion>
-          <npmVersion>8.6.0</npmVersion>
+          <nodeVersion>v18.18.0</nodeVersion>
+          <npmVersion>9.8.1</npmVersion>
           <workingDirectory>web</workingDirectory>
         </configuration>
 

bundles/org.openhab.ui/web/babel.config.js

@@ -24,7 +24,7 @@ module.exports = {
     test: {
       plugins: [
         '@babel/plugin-transform-modules-commonjs',
-        'babel-plugin-dynamic-import-node-babel-7'
+        'babel-plugin-dynamic-import-node'
       ],
       presets: [
         [

bundles/org.openhab.ui/web/build/webpack.config.js

@@ -1,9 +1,9 @@
 const webpack = require('webpack')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { VueLoaderPlugin } = require('vue-loader')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin')
 const WorkboxPlugin = require('workbox-webpack-plugin')
 const WebpackAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
@@ -12,7 +12,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
 
 const path = require('path')
 
-function resolvePath (dir) {
+function resolvePath(dir) {
   return path.join(__dirname, '..', dir)
 }
 
@@ -23,36 +23,42 @@ const isCordova = target === 'cordova'
 
 const apiBaseUrl = process.env.OH_APIBASE || 'http://localhost:8080'
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = {
   mode: env,
   entry: [
     './src/js/app.js'
   ],
   output: {
     path: resolvePath(isCordova ? 'cordova/www' : 'www'),
-    filename: 'js/app.[hash].js',
+    filename: 'js/app.[contenthash].js',
     publicPath: '/',
-    hotUpdateChunkFilename: 'hot/hot-update.js',
-    hotUpdateMainFilename: 'hot/hot-update.json'
+    hotUpdateChunkFilename: 'hot/[id].[fullhash].hot-update.js',
+    hotUpdateMainFilename: 'hot/[runtime].hot-update.json'
   },
   resolve: {
+    fallback: {
+      "crypto": require.resolve("crypto-browserify"),
+      "stream": require.resolve("stream-browserify"),
+      "path": require.resolve("path-browserify"),
+    },
     extensions: ['.mjs', '.js', '.vue', '.json'],
     alias: {
       vue$: 'vue/dist/vue.esm.js',
       '@': resolvePath('src')
     }
   },
-  devtool: env === 'production' ? (buildSourceMaps) ? 'source-map' : 'none' : 'eval-source-map',
+  devtool: env === 'production' ? (buildSourceMaps ? 'source-map' : false) : 'eval-source-map',
   devServer: {
     hot: true,
-    // open: true,
-    // compress: true,
-    contentBase: '/www/',
-    disableHostCheck: true,
+    compress: false, // disable compression as this seems to break the SSE event stream
+    static: [
+      path.resolve(__dirname, 'www'),
+    ],
+    allowedHosts: "all",
     historyApiFallback: true,
-    // watchOptions: {
-    //   poll: 1000,
-    // },
     proxy: [{
       context: ['/auth', '/rest', '/chart', '/proxy', '/icon', '/static', '/changePassword', '/createApiToken', '/audio'],
       target: apiBaseUrl
@@ -63,9 +69,22 @@ module.exports = {
     maxEntrypointSize: 2500000
   },
   optimization: {
-    minimizer: [new TerserPlugin({
-      sourceMap: true
-    })]
+    moduleIds: env === 'production' ? undefined : 'named',
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          sourceMap: true
+        }
+      }),
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          processorOptions: {
+            safe: true,
+            map: { inline: false, annotation: env !== 'production' }
+          },
+        },
+      }),
+    ]
   },
   module: {
     rules: [
@@ -87,11 +106,6 @@ module.exports = {
           resolvePath('node_modules/ssr-window')
         ]
       },
-      {
-        test: /(blockly\/.*\.js)$/,
-        enforce: "pre",
-        use: (buildSourceMaps) ? ["source-map-loader"] : [],
-      },
       {
         test: /\.vue$/,
         use: 'vue-loader'
@@ -153,26 +167,38 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'images/[name].[ext]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000
+          }
+        },
+        generator: {
+          filename: 'images/[name].[ext]'
         }
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac|m4a)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'media/[name].[ext]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000
+          }
+        },
+        generator: {
+          filename: 'media/[name].[ext]'
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: 'fonts/[name].[ext]'
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000
+          }
+        },
+        generator: {
+          filename: 'fonts/[name].[ext]'
         }
       },
       {
@@ -185,6 +211,9 @@ module.exports = {
     ]
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser.js',
+  }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(env),
       'process.env.TARGET': JSON.stringify(target)
@@ -194,17 +223,9 @@ module.exports = {
       new ESLintPlugin({
         extensions: ['js', 'vue']
       }),
-      new OptimizeCSSPlugin({
-        cssProcessorOptions: {
-          safe: true,
-          map: { inline: false }
-        }
-      }),
       new webpack.optimize.ModuleConcatenationPlugin()
     ] : [
       // Development only plugins
-      new webpack.HotModuleReplacementPlugin(),
-      new webpack.NamedModulesPlugin()
     ]),
     new HtmlWebpackPlugin({
       filename: './index.html',
@@ -220,25 +241,28 @@ module.exports = {
       } : false
     }),
     new MiniCssExtractPlugin({
-      filename: 'css/app.[hash].css'
+      filename: 'css/app.[contenthash].css'
     }),
-    new CopyWebpackPlugin([
-      {
-        from: resolvePath('src/res'),
-        to: resolvePath(isCordova ? 'cordova/www/res' : 'www/res')
-      },
-      {
-        from: resolvePath('src/manifest.json'),
-        to: resolvePath('www/manifest.json')
-      },
-      {
-        from: resolvePath('src/robots.txt'),
-        to: resolvePath('www/robots.txt')
-      }
-    ]),
-    ...(!isCordova ? [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: resolvePath('src/res'),
+          to: resolvePath(isCordova ? 'cordova/www/res' : 'www/res')
+        },
+        {
+          from: resolvePath('src/manifest.json'),
+          to: resolvePath('www/manifest.json')
+        },
+        {
+          from: resolvePath('src/robots.txt'),
+          to: resolvePath('www/robots.txt')
+        }
+      ]
+    }),
+    ...(!isCordova && env === 'production' ? [
       new WorkboxPlugin.InjectManifest({
-        swSrc: resolvePath('src/service-worker.js')
+        swSrc: resolvePath('src/service-worker.js'),
+        maximumFileSizeToCacheInBytes: 100000000,
       })
     ] : []),
     ...(env === 'production' ? [