scalableminds · bulldozer-boy · Jan 24, 2022 · Jan 18, 2022 · Jan 19, 2022 · Jan 19, 2022
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -52,10 +52,10 @@ jobs:
           name: Install frontend dependencies
           command: docker-compose run -e PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true base yarn install --frozen-lockfile
       - restore_cache:
-          name: Restore webpack-uglifyjs cache
+          name: Restore webpack cache
           keys:
-            - webpack-uglifyjs-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}
-            - webpack-uglifyjs-cache-{{ checksum ".circleci/cache_version" }}-master
+            - webpack-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}
+            - webpack-cache-{{ checksum ".circleci/cache_version" }}-master
       - run:
           name: Assert schema.sql and evolutions are equal
           command: |
@@ -110,10 +110,10 @@ jobs:
             - "~/.cache/yarn"
 
       - save_cache:
-          name: Save webpack-uglifyjs cache
-          key: webpack-uglifyjs-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}-{{ .Revision }}
+          name: Save webpack cache
+          key: webpack-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}-{{ .Revision }}
           paths:
-            - "node_modules/.cache/uglifyjs-webpack-plugin"
+            - "node_modules/.cache/webpack"
 
       - run:
           name: Build webknossos docker image

diff --git a/.flowconfig b/.flowconfig
@@ -18,7 +18,7 @@
 <PROJECT_ROOT>/node_modules/documentation/
 <PROJECT_ROOT>/node_modules/flow-coverage-report/
 <PROJECT_ROOT>/node_modules/jsonlint/
-<PROJECT_ROOT>/node_modules/hard-source-webpack-plugin/
+<PROJECT_ROOT>/node_modules/eslint-import-resolver-webpack
 <PROJECT_ROOT>/node_modules/.cache/nyc/
 <PROJECT_ROOT>/.nyc_output
 

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -17,6 +17,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added the possibility to cancel running webknossos-worker jobs. [#5946](https://github.com/scalableminds/webknossos/pull/5946)
 
 ### Changed
+- Upgraded webpack build tool to v5 and all other webpack related dependencies to their latest version. Enabled persistent caching which speeds up server restarts during development as well as production builds. [#5969](https://github.com/scalableminds/webknossos/pull/5969)
 
 ### Fixed
 - Fixed bug where volume data downloads would sometimes produce invalid zips due to a race condition. [#5926](https://github.com/scalableminds/webknossos/pull/5926)

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <meta name="commit-hash" content="@(webknossos.BuildInfo.commitHash)" />
     <title>@(conf.WebKnossos.tabTitle)</title>
     @if(conf.Features.isDemoInstance){
@@ -22,7 +22,7 @@
       rel="stylesheet"
       type="text/css"
       media="screen"
-      href="/assets/bundle/vendors~dark~light.css?nocache=@(webknossos.BuildInfo.commitHash)"
+      href="/assets/bundle/vendors~main.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
     <link
       rel="stylesheet"
@@ -33,23 +33,26 @@
     <script>
       let initialTheme = "@(selectedTheme)";
       if (initialTheme === "auto") {
-        initialTheme = 
-          window.matchMedia('(prefers-color-scheme: dark)').media !== "not all" && 
-          window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-            "dark" : 
-            "light";
+        initialTheme =
+          window.matchMedia("(prefers-color-scheme: dark)").media !== "not all" &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light";
       }
-      document.documentElement.style.display = 'none';
+      document.documentElement.style.display = "none";
       document.head.insertAdjacentHTML(
-        'beforeend',
-        '<link ' +
+        "beforeend",
+        "<link " +
           'id="primary-stylesheet" ' +
           'rel="stylesheet" ' +
           'type="text/css" ' +
           'media="screen" ' +
-          'href="/assets/bundle/' + initialTheme + '.css?nocache=@(webknossos.BuildInfo.commitHash)" ' +
-          'onload="document.documentElement.style.display = \'\'" ' + 
-        '/>');
+          'href="/assets/bundle/' +
+          initialTheme +
+          '.css?nocache=@(webknossos.BuildInfo.commitHash)" ' +
+          "onload=\"document.documentElement.style.display = ''\" " +
+          "/>",
+      );
     </script>
     <script
       data-airbrake-project-id="@(conf.Airbrake.projectID)"

diff --git a/frontend/javascripts/libs/error_handling.js b/frontend/javascripts/libs/error_handling.js
@@ -2,7 +2,7 @@
  * error_handling.js
  * @flow
  */
-import AirbrakeClient from "airbrake-js";
+import { Notifier } from "@airbrake/browser";
 import _ from "lodash";
 
 import { getActionLog } from "oxalis/model/helpers/action_logger_middleware";
@@ -61,7 +61,7 @@ export function handleGenericError(error: { ...Error, messages?: mixed }) {
 class ErrorHandling {
   throwAssertions: boolean;
   commitHash: ?string;
-  airbrake: typeof AirbrakeClient;
+  airbrake: typeof Notifier;
   numberOfErrors: number = 0;
 
   initialize(options: ErrorHandlingOptions) {
@@ -86,9 +86,10 @@ class ErrorHandling {
     const projectKey = scriptTag.dataset.airbrakeProjectKey;
     const envName = scriptTag.dataset.airbrakeEnvironmentName;
 
-    this.airbrake = new AirbrakeClient({
+    this.airbrake = new Notifier({
       projectId,
       projectKey,
+      remoteConfig: false,
     });
 
     this.airbrake.addFilter(notice => {

diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.js b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.js
@@ -99,10 +99,10 @@ const mapStateToProps = (state: OxalisState): StateProps => {
   const activeVolumeTracing = getActiveSegmentationTracing(state);
   const mappingInfo = getMappingInfo(
     state.temporaryConfiguration.activeMappingByLayer,
-    visibleSegmentationLayer != null ? visibleSegmentationLayer.name : null,
+    visibleSegmentationLayer?.name,
   );
   return {
-    activeCellId: activeVolumeTracing != null ? activeVolumeTracing.activeCellId : null,
+    activeCellId: activeVolumeTracing?.activeCellId,
     isosurfaces:
       visibleSegmentationLayer != null
         ? state.localSegmentationData[visibleSegmentationLayer.name].isosurfaces

diff --git a/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js b/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js
@@ -2,7 +2,6 @@
 import type { DatasetConfiguration } from "oxalis/store";
 import anyTest, { type TestInterface } from "ava";
 import fetch, { Headers, Request, Response, FetchError } from "node-fetch";
-// eslint-disable-next-line import/no-extraneous-dependencies
 import path from "path";
 import puppeteer, { type Browser } from "puppeteer";
 

diff --git a/package.json b/package.json
@@ -23,20 +23,21 @@
     "abort-controller": "^3.0.0",
     "ava": "^3.13.0",
     "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-import": "^1.9.1",
     "babel-plugin-istanbul": "^5.1.0",
     "commander": "^2.17.1",
+    "copy-webpack-plugin": "^10.2.0",
     "coveralls": "^3.0.2",
-    "css-loader": "^2.1.0",
+    "css-loader": "^6.5.1",
     "documentation": "^13.2.5",
     "domexception": "^2.0.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "eslint": "^5.7.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.1.0",
-    "eslint-import-resolver-webpack": "^0.10.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-eslint-comments": "^3.1.1",
     "eslint-plugin-flow-header": "^0.2.0",
     "eslint-plugin-flowtype": "^3.0.0",
@@ -45,20 +46,16 @@
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.0.1",
     "espree": "^3.5.4",
-    "file-loader": "^1.1.5",
     "flow-bin": "^0.133.0",
     "flow-coverage-report": "^0.8.0",
-    "git-revision-webpack-plugin": "^3.0.3",
     "glob": "^7.1.3",
-    "hard-source-webpack-plugin": "git+https://github.com/talkable/hard-source-webpack-plugin.git#e774ef34ac7de7badf83f8560cca13861e76f23c",
-    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "isomorphic-fetch": "^2.2.0",
     "jsdoc": "^3.5.5",
     "jsdom": "^11.5.1",
     "json-loader": "^0.5.7",
     "less": "^4.0.0",
-    "less-loader": "^4.1.0",
+    "less-loader": "^10.2.0",
     "lint-staged": "^7.3.0",
     "merge-img": "^2.1.2",
     "mock-require": "^1.2.1",
@@ -78,20 +75,17 @@
     "rimraf": "^2.6.2",
     "shelljs": "^0.8.5",
     "sinon": "^12.0.1",
-    "style-loader": "^0.20.2",
-    "terser-webpack-plugin": "^1.1.0",
     "tmp": "0.0.33",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
   },
   "optionalDependencies": {
     "gl": "stackgl/headless-gl#4.5.0"
   },
   "scripts": {
     "start": "node tools/proxy/proxy.js",
-    "build": "node --max-old-space-size=4096 node_modules/.bin/webpack --env.production",
+    "build": "node --max-old-space-size=4096 node_modules/.bin/webpack --env production",
     "build-dev": "node_modules/.bin/webpack",
     "build-watch": "node_modules/.bin/webpack -w",
     "test": "tools/test.sh test --timeout=30s",
@@ -132,6 +126,7 @@
     ]
   },
   "dependencies": {
+    "@airbrake/browser": "^2.1.7",
     "@ant-design/compatible": "^1.0.8",
     "@ant-design/icons": "^4.6.2",
     "@fortawesome/fontawesome-free": "^5.14.0",
@@ -140,15 +135,12 @@
     "@tensorflow/tfjs": "^1.0.0",
     "@use-it/interval": "^1.0.0",
     "Enumjs": "https://github.com/ryan953/Enumjs#master",
-    "airbrake-js": "^1.4.0",
     "antd": "^4.15.0",
-    "autodll-webpack-plugin": "^0.4.2",
     "backbone-events-standalone": "^0.2.7",
     "base64-js": "^1.2.1",
     "beautiful-react-hooks": "^0.30.5",
     "classnames": "^2.2.5",
     "comlink": "^4.3.0",
-    "copy-webpack-plugin": "^4.6.0",
     "cross-fetch": "^3.0.1",
     "data.maybe": "^1.2.2",
     "deep-for-each": "^2.0.3",
@@ -168,7 +160,7 @@
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
     "memoize-one": "^4.0.2",
-    "mini-css-extract-plugin": "^0.4.0",
+    "mini-css-extract-plugin": "^2.5.2",
     "mjs": "^1.0.0",
     "moment": "^2.21.0",
     "nanoevents": "^5.1.8",
@@ -192,10 +184,12 @@
     "redux-saga": "^1.0.0",
     "resumablejs": "^1.1.0",
     "saxophone": "^0.7.1",
+    "terser-webpack-plugin": "^5.3.0",
     "three": "^0.110.0",
     "tween.js": "^16.3.1",
+    "url": "^0.11.0",
     "url-join": "^4.0.0",
-    "worker-loader": "^2.0.0",
+    "worker-loader": "^3.0.8",
     "zip-js-webpack": "^1.0.0"
   },
   "resolutions": {