Upgrade webpack

docker/django

@@ -28,11 +28,11 @@ WORKDIR /app
 
 COPY ./*.json ./*.js ./.babelrc /app/
 
-RUN npm ci
+RUN npm ci --include=dev
 
 COPY ./src /app/src
 
-RUN npm run build
+RUN npm run build:prod
 
 
 # stage 3

docker/webpack

@@ -5,6 +5,4 @@ RUN mkdir /app/src
 
 COPY package*.json webpack.*.js .babelrc /app/
 
-RUN npm install
-
-COPY ./src /app/src
+RUN npm ci --include=dev

package.json

@@ -14,7 +14,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "[git@git.fudiggity.nl:5000]:sonny/newsreader.git"
+    "url": "git@git.fudiggity.nl:sonny/newsreader.git"
   },
   "author": "Sonny",
   "license": "GPL-3.0-or-later",
@@ -40,24 +40,23 @@
     "@babel/register": "^7.12.13",
     "@babel/runtime": "^7.12.13",
     "babel-jest": "^24.9.0",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.6.0",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
     "fetch-mock": "^8.3.2",
-    "file-loader": "^6.2.0",
-    "jest": "^24.9.0",
-    "mini-css-extract-plugin": "^0.9.0",
+    "jest": "^29.6.2",
+    "mini-css-extract-plugin": "^2.7.6",
     "node-fetch": "^2.6.1",
     "prettier": "^1.19.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "redux-mock-store": "^1.5.4",
-    "sass": "^1.52.1",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.3.0",
+    "sass": "^1.64.2",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
     "url-loader": "^4.1.1",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^4.2.2"
+    "webpack": "5.88.x",
+    "webpack-cli": "^5.1.4",
+    "webpack-merge": "^5.9.0"
   }
 }

src/newsreader/conf/base.py

@@ -19,7 +19,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent.parent.parent
 DJANGO_PROJECT_DIR = os.path.join(BASE_DIR, "src", "newsreader")
 
 # Quick-start development settings - unsuitable for production
-# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
+# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
 # SECURITY WARNING: don"t run with debug turned on in production!
 DEBUG = False
 
@@ -37,7 +37,6 @@ INSTALLED_APPS = [
     "django.forms",
     # third party apps
     "rest_framework",
-    "drf_yasg",
     "celery",
     "django_celery_beat",
     "registration",
@@ -91,7 +90,7 @@ TEMPLATES = [
 WSGI_APPLICATION = "newsreader.wsgi.application"
 
 # Database
-# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
+# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
 DATABASES = {
     "default": {
         "ENGINE": "django.db.backends.postgresql",
@@ -107,17 +106,17 @@ DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
 
 CACHES = {
     "default": {
-        "BACKEND": "django.core.cache.backends.memcached.MemcachedCache",
+        "BACKEND": "django.core.cache.backends.memcached.PyMemcacheCache",
         "LOCATION": "memcached:11211",
     },
     "axes": {
-        "BACKEND": "django.core.cache.backends.memcached.MemcachedCache",
+        "BACKEND": "django.core.cache.backends.memcached.PyMemcacheCache",
         "LOCATION": "memcached:11211",
     },
 }
 
 # Logging
-# https://docs.djangoproject.com/en/2.2/topics/logging/#configuring-logging
+# https://docs.djangoproject.com/en/4.2/topics/logging/#configuring-logging
 LOGGING = {
     "version": 1,
     "disable_existing_loggers": False,
@@ -172,7 +171,7 @@ LOGGING = {
 }
 
 # Password validation
-# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
+# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
 AUTH_PASSWORD_VALIDATORS = [
     {
         "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator"
@@ -188,7 +187,7 @@ AUTH_USER_MODEL = "accounts.User"
 LOGIN_REDIRECT_URL = "/"
 
 # Internationalization
-# https://docs.djangoproject.com/en/2.2/topics/i18n/
+# https://docs.djangoproject.com/en/4.2/topics/i18n/
 LANGUAGE_CODE = "en-us"
 
 TIME_ZONE = "Europe/Amsterdam"
@@ -197,12 +196,12 @@ USE_L10N = True
 USE_TZ = True
 
 # Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/2.2/howto/static-files/
+# https://docs.djangoproject.com/en/4.2/howto/static-files/
 STATIC_URL = "/static/"
 STATIC_ROOT = os.path.join(BASE_DIR, "static")
 STATICFILES_DIRS = [os.path.join(DJANGO_PROJECT_DIR, "static")]
 
-# https://docs.djangoproject.com/en/2.2/ref/settings/#std:setting-STATICFILES_FINDERS
+# https://docs.djangoproject.com/en/4.2/ref/settings/#std:setting-STATICFILES_FINDERS
 STATICFILES_FINDERS = [
     "django.contrib.staticfiles.finders.FileSystemFinder",
     "django.contrib.staticfiles.finders.AppDirectoriesFinder",

src/newsreader/scss/lib/_font-awesome.scss

@@ -1,5 +1,6 @@
-$fa-font-path: '/static/fonts';
+$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
 
-@import '@fortawesome/fontawesome-free/scss/fontawesome';
-@import '@fortawesome/fontawesome-free/scss/solid';
-@import '@fortawesome/fontawesome-free/scss/regular';
+@import '~@fortawesome/fontawesome-free/scss/fontawesome';
+@import '~@fortawesome/fontawesome-free/scss/regular';
+@import '~@fortawesome/fontawesome-free/scss/brands';
+@import '~@fortawesome/fontawesome-free/scss/solid';

src/newsreader/templates/admin/base_site.html

@@ -6,5 +6,5 @@
 {% endblock %}
 
 {% block extrahead %}
-  <link type="image/png" href="{% static 'favicon.png' %}" rel="shortcut icon" />
+  <link type="image/png" href="{% static 'images/favicon.png' %}" rel="shortcut icon" />
 {% endblock %}

src/newsreader/templates/base.html

@@ -4,7 +4,7 @@
 <html>
   <head>
     <title>Newreader</title>
-    <link type="image/png" href="{% static 'favicon.png' %}" rel="shortcut icon" />
+    <link type="image/png" href="{% static 'images/favicon.png' %}" rel="shortcut icon" />
     {% block head %}
       <link href="{% static 'css/main.css' %}" rel="stylesheet" />
     {% endblock %}

webpack.common.babel.js

@@ -1,6 +1,7 @@
 import { resolve } from 'path';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyPlugin from 'copy-webpack-plugin';
 
 export default {
   resolve: { extensions: ['.js', '.scss'] },
@@ -10,6 +11,7 @@ export default {
   output: {
     path: resolve(__dirname, 'src', 'newsreader', 'static'),
     filename: 'js/[name].bundle.js',
+    clean: true,
   },
   module: {
     rules: [
@@ -23,26 +25,30 @@ export default {
         use: [{ loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'],
       },
       {
-        test: /\.(ttf|woff|woff2)$/,
-        use: {
-          loader: 'file-loader',
-          options: {
-            name: '[name].[ext]',
-            outputPath: 'fonts',
-            publicPath: '/static/fonts/',
-          },
+        test: /\.(ttf|woff|woff2|eot|otf)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'fonts/[name][ext]',
+        },
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[name][ext]',
         },
       },
     ],
   },
   plugins: [
-    new MiniCssExtractPlugin({
-      filename: 'css/main.css',
-      allChunks: true,
-    }),
-    new CleanWebpackPlugin({
-      cleanOnceBeforeBuildPatterns: ['js', 'css', 'fonts'],
-      cleanAfterEveryBuildPatterns: ['!fonts/**'],
+    new MiniCssExtractPlugin({ filename: 'css/main.css' }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: './src/newsreader/assets/images/favicon.png',
+          to: 'images/',
+        },
+      ],
     }),
   ],
 };