Upgrade webpack

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/',
+        },
+      ],
     }),
   ],
 };