dependencies: update webpack config like a+

package.json

@@ -2,23 +2,12 @@
   "name": "euth_wagtail",
   "repository": "https://github.com/liqd/euth_wagtail.git",
   "dependencies": {
-    "@babel/compat-data": "7.14.7",
-    "@babel/core": "7.14.8",
-    "@babel/plugin-transform-modules-commonjs": "7.14.5",
-    "@babel/plugin-transform-runtime": "7.14.5",
-    "@babel/preset-env": "7.14.8",
-    "@babel/preset-react": "7.14.5",
-    "@babel/runtime": "7.14.8",
     "@fortawesome/fontawesome-free": "5.15.4",
     "adhocracy4": "github:liqd/adhocracy4#opin-v2109",
     "axios": "0.21.1",
-    "babel-loader": "8.2.2",
     "bootstrap": "5.0.2",
-    "classnames": "2.3.1",
-    "copy-webpack-plugin": "9.0.1",
     "css-loader": "6.2.0",
     "datepicker": "git+https://github.com/liqd/datePicker.git",
-    "file-loader": "6.2.0",
     "flatpickr": "4.6.9",
     "immutability-helper": "3.1.1",
     "jquery": "3.6.0",
@@ -36,16 +25,21 @@
     "react-flip-move": "3.0.4",
     "sass-loader": "12.1.0",
     "slick-carousel": "1.8.1",
-    "style-loader": "3.2.1",
     "terser-webpack-plugin": "5.1.4",
-    "typeahead.js": "0.11.1",
-    "webpack": "5.47.1",
-    "webpack-cli": "4.7.2",
-    "webpack-merge": "5.8.0"
+    "typeahead.js": "0.11.1"
   },
   "devDependencies": {
+    "@babel/compat-data": "7.14.7",
+    "@babel/core": "7.14.8",
+    "@babel/plugin-transform-modules-commonjs": "7.14.5",
+    "@babel/plugin-transform-runtime": "7.14.5",
+    "@babel/preset-env": "7.14.8",
+    "@babel/preset-react": "7.14.5",
+    "@babel/runtime": "7.14.8",
     "autoprefixer": "10.3.3",
     "babel-eslint": "10.1.0",
+    "babel-loader": "8.2.2",
+    "copy-webpack-plugin": "9.0.1",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-config-standard-jsx": "10.0.0",
@@ -61,7 +55,10 @@
     "postcss": "8.3.6",
     "stylelint": "13.13.1",
     "stylelint-config-standard": "22.0.0",
-    "stylelint-declaration-strict-value": "1.7.12"
+    "stylelint-declaration-strict-value": "1.7.12",
+    "webpack": "5.47.0",
+    "webpack-cli": "4.7.2",
+    "webpack-merge": "5.8.0"
   },
   "license": "AGPL-3.0+",
   "scripts": {

webpack.common.js

@@ -134,24 +134,33 @@ module.exports = {
       dependOn: 'adhocracy4'
     }
   },
+  // exposes exports of entry points
   output: {
-    libraryTarget: 'this',
-    library: '[name]',
+    library: {
+      name: '[name]',
+      type: 'this' // return value of entry point will be assigned this.
+    },
     path: path.resolve('./euth_wagtail/static'),
     publicPath: '/static/'
   },
   externals: {
     django: 'django'
   },
+  // enables assets property for loading
+  experiments: {
+    asset: true
+  },
   module: {
     rules: [
       {
         test: /\.jsx?$/,
         exclude: /node_modules\/(?!(adhocracy4)\/).*/, // exclude all dependencies but adhocracy4
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env', '@babel/preset-react'].map(require.resolve),
-          plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-transform-modules-commonjs']
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react'].map(require.resolve),
+            plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-transform-modules-commonjs']
+          }
         }
       },
       {

webpack.dev.js

@@ -2,5 +2,6 @@ const { merge } = require('webpack-merge')
 const common = require('./webpack.common.js')
 
 module.exports = merge(common, {
+  mode: 'development',
   devtool: 'eval'
 })

webpack.prod.js

@@ -3,7 +3,8 @@ const { merge } = require('webpack-merge')
 const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = merge(common, {
-  devtool: 'eval',
+  mode: 'production',
+  devtool: 'source-map',
   optimization: {
     minimize: true,
     minimizer: [