fixed webpack warnings

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,
+              },
+            },
+          ],
+        },
+      ],
+    },
   }
 }