Upgrade from webpack v4 to v5 (#2267)

Upgrade webpack and related build dependencies from v4 to v5.
Also upgrade the NodeJS and npm versions used by the Main UI build as well as babel.

The changes follow the recommendations of the webpack migration guide at https://webpack.js.org/migrate/5/ or are required changes for updated webpack plugins.
New default values causing problems have been overwritten, e.g. devServer.compress: false because compression broke the SSE event streams.
The ModuleConcatenationPlugin is not created manually in production mode anymore, as this setting broke the production build, and it is not neccassary to create that, as this plugin is automatically enabled in production mode.
See https://webpack.js.org/plugins/module-concatenation-plugin/.

---------

Also-by: Florian Hotze <florianh_dev@icloud.com>
Signed-off-by: Miguel Álvarez <miguelwork92@gmail.com>

.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)
@@ -193,18 +222,9 @@ module.exports = {
     ...(env === 'production' ? [
       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 +240,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' ? [