build: Migrate to webpack 5 and node 14

As the codebase currently uses a lot of outdated packages, we are
moving to the next Webpack and Node versions.

- add resolveRoot function to utils.js to resolve repo root path
- many adjustments in webpack plugins and config structure
- use webpack functionality instead of plugins where possible
- adjust leaflet asset loading to be available both in prod and dev
- update dependencies
- remove unused ors-vue-json-tree, vue-scrollto and friendly-errors-webpack-plugin
- add node environment to eslintrc

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     requireConfigFile: false
   },
   env: {
+    node: true,
     browser: true,
   },
   // https://github.com/standard/standard/blob/master/docs/RULES-en.md

.gitignore

@@ -42,3 +42,6 @@ selenium-server.log
 !/static/img/.gitkeep
 !/static/img/.gitkeep
 
+# leaflet helpers
+
+/images

build/utils.js

@@ -18,7 +18,8 @@ exports.cssLoaders = function (options) {
   const cssLoader = {
     loader: 'css-loader',
     options: {
-      sourceMap: options.sourceMap
+      sourceMap: options.sourceMap,
+      url: false
     }
   }
 
@@ -94,7 +95,15 @@ exports.createNotifierCallback = () => {
       title: packageConfig.name,
       message: severity + ': ' + error.name,
       subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
+      icon: resolve('logo.png')
     })
   }
 }
+
+/**
+ * Resolves paths relative from repository root
+ * @param {string} rootPath
+ */
+exports.resolveRoot = (rootPath= "") => {
+  return path.join(__dirname, '..', rootPath)
+}

build/webpack.base.conf.js

@@ -1,42 +1,49 @@
 'use strict'
-const path = require('path')
-const utils = require('./utils')
+const { resolveRoot } = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+const webpack = require('webpack')
 
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
 
 const createLintingRule = () => ({
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
+  include: [resolveRoot('src'), resolveRoot('test')],
+  exclude: [resolveRoot('tests/integration/mockups')],
   options: {
     formatter: require('eslint-friendly-formatter'),
     emitWarning: !config.dev.showEslintErrorsInOverlay
   }
 })
 
 module.exports = {
-  context: path.resolve(__dirname, '../'),
+  plugins: [
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    })
+  ],
+  context: resolveRoot(),
   entry: {
     app: './src/main.js'
   },
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
+    assetModuleFilename: '[base]',
+    publicPath: '/'
   },
   resolve: {
     alias: {
-      '@': resolve('src'),
+      '@': resolveRoot('src'),
       'vue$': 'vue/dist/vue.esm.js'
     },
-    extensions: ['.vue', '.js', '.json']
+    extensions: ['.vue', '.js', '.json'],
+    fallback: {
+      timers: require.resolve('timers-browserify'),
+      stream: require.resolve('stream-browserify')
+    }
   },
   module: {
     rules: [
@@ -49,38 +56,19 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
+        include: [
+          resolveRoot('src/'),
+          resolveRoot('test/'),
+          resolveRoot('node_modules/webpack-dev-server/client/')],
         options: {
           plugins: [ '@babel/plugin-proposal-object-rest-spread' ]
         }
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(txt?|gpx|geojson|kml)(\?.*)?$/,
-        use: 'raw-loader'
+      },{
+        test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|jpeg|gif|ico)$/i,
+        type: 'asset'
+      },{
+        test: /\.(geojson|kml|gpx|txt)$/i,
+        type: 'asset/source',
       }
     ]
   }

build/webpack.dev.conf.js

@@ -1,71 +1,67 @@
 'use strict'
-const utils = require('./utils')
+const {resolveRoot, styleLoaders} = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
 const merge = require('webpack-merge')
 const path = require('path')
 const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
+const CopyWebpackPlugin = require("copy-webpack-plugin")
 
 const HOST = process.env.HOST
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {
   mode: 'development',
+  stats: "normal",
   module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+    rules: styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
   },
   // cheap-module-eval-source-map is faster for development
   devtool: config.dev.devtool,
 
   // these devServer options should be customized in /config/index.js
   devServer: {
-    clientLogLevel: 'warning',
+    client: {
+      logging: 'verbose',
+      overlay: { warnings: false, errors: true },
+    },
     historyApiFallback: {
       rewrites: [
         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'dev.html') }
       ],
     },
     hot: true,
-    contentBase: false, // since we use CopyWebpackPlugin.
     compress: true,
     host: HOST || config.dev.host,
     port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll,
-    }
+    open: false,
+    static: {
+      directory: 'src/assets',
+      publicPath: '/static',
+    },
+    proxy: config.dev.proxyTable
+  },
+  watchOptions: {
+    poll: 1000,
   },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': require('../config/dev.env')
     }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: resolveRoot("node_modules/leaflet/dist/images"),
+        to: resolveRoot("images")
+      }]
+    }),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'dev.html',
       template: 'dev.html',
       inject: true
     }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../src/assets'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
   ]
 })
 
@@ -80,16 +76,6 @@ module.exports = new Promise((resolve, reject) => {
       // add port to devServer config
       devWebpackConfig.devServer.port = port
 
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
       resolve(devWebpackConfig)
     }
   })