fixed webpack warnings

package.json

@@ -10,11 +10,6 @@
     "run:prod": "webpack serve --mode production --open",
     "lint": "eslint --fix . && echo 'Lint complete.'"
   },
-  "engines": {
-    "node": "v14.15.4",
-    "npm": "7.24.0",
-    "watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src"
-  },
   "author": "Andres Alcocer",
   "license": "ISC",
   "dependencies": {
@@ -46,6 +41,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.2",
+    "css-minimizer-webpack-plugin": "^4.2.2",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -54,22 +50,19 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "image-webpack-loader": "^8.1.0",
     "mini-css-extract-plugin": "^2.7.0",
     "node-sass": "^8.0.0",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
     "prettier": "^2.8.0",
-    "react-owl-carousel2": "^0.3.0",
     "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
     "svg-inline-loader": "^0.8.2",
     "svg-react-loader": "^0.4.6",
     "tap-nirvana": "^1.1.0",
-    "uglifyjs-webpack-plugin": "^2.2.0",
+    "terser-webpack-plugin": "^5.3.6",
     "watch": "^1.0.2",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0",

webpack.config.js

@@ -1,9 +1,12 @@
 const HtmlWebPackPlugin = require('html-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 const dotenv = require('dotenv')
 const webpack = require('webpack')
+
 const prod =
   (process.env.NODE_ENV ? process.env.NODE_ENV : '').trim() === 'production'
 const path = require('path')
@@ -23,6 +26,7 @@ module.exports = () => {
     optimization: {
       runtimeChunk: 'single',
       moduleIds: 'deterministic',
+      minimizer: [`...`, new CssMinimizerPlugin()],
       splitChunks: {
         cacheGroups: {
           vendor: {
@@ -30,61 +34,18 @@ module.exports = () => {
             name: 'vendors',
             chunks: 'all',
           },
+          styles: {
+            name: 'styles',
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
+          },
         },
       },
     },
     mode: prod ? 'production' : 'development',
     // Enable sourcemaps for debugging webpack's output.
     devtool: prod ? 'none' : 'eval-source-map',
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader',
-          },
-        },
-        {
-          test: /\.svg$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'svg-react-loader',
-          },
-        },
-        {
-          test: /\.css$/,
-          include: /node_modules/,
-          use: ['style-loader', 'css-loader'],
-        },
-        {
-          test: /\.scss$/,
-          use: [
-            {
-              loader: MiniCssExtractPlugin.loader,
-              options: {
-                publicPath: '../',
-              },
-            },
-            'css-loader',
-            'sass-loader',
-          ],
-        },
-        {
-          test: /\.(gif|png|jpe?g)$/i,
-          use: [
-            'file-loader',
-            {
-              loader: 'image-webpack-loader',
-              options: {
-                bypassOnDebug: true, // webpack@1.x
-                disable: true, // webpack@2.x and newer
-              },
-            },
-          ],
-        },
-      ],
-    },
     devServer: {
       historyApiFallback: true,
     },
@@ -108,9 +69,57 @@ module.exports = () => {
         ],
       }),
       new MiniCssExtractPlugin({
-        filename: 'main.css',
+        filename: '[name].css',
       }),
       new CleanWebpackPlugin(),
     ],
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+        {
+          test: /\.svg$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'svg-react-loader',
+          },
+        },
+        {
+          test: /\.css$/i,
+          use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                publicPath: '../',
+              },
+            },
+            'css-loader',
+            'sass-loader',
+          ],
+        },
+        {
+          test: /\.(gif|png|jpe?g)$/i,
+          use: [
+            'file-loader',
+            {
+              loader: 'image-webpack-loader',
+              options: {
+                bypassOnDebug: true,
+                disable: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
   }
 }