change hero height to 55vh

webpack.config.js

@@ -1,15 +1,18 @@
+const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const { SourceMapDevToolPlugin } = require("webpack");
 const path = require('path');
 
 module.exports = {
+  mode: 'production',
   entry: {
     app: path.resolve(__dirname, 'src/app.js')
   },
   output: {
     filename: '[name].bundle.js',
-    path: path.resolve(__dirname, 'static/'),
+    path: path.resolve(__dirname, 'static/js/'),
+    clean: true
   },
   module: {
     rules: [
@@ -18,22 +21,23 @@ module.exports = {
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
       },
       {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          outputPath: 'static/images/'
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: '../images/[name][ext][query]'
         }
       },
       {
-        test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: [{
-          loader: 'file-loader',
-        }]
+        test: /\.(ttf|eot|woff2?|otf)(\?v=\d+\.\d+\.\d+)?$/,
+        type: 'asset/resource',
+        generator: {
+          filename: '../fonts/[name][ext][query]'
+        }
       },
     ],
   },
   resolve: {
-    extensions: ['', '.js', '.jsx', '.css']
+    extensions: ['.js', '.jsx', '.css']
   },
   plugins: [
     new MiniCssExtractPlugin(),
@@ -42,7 +46,24 @@ module.exports = {
     })
   ],
   optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'all',
+        },
+      },
+    },
     minimizer: [
+      new TerserPlugin({
+        terserOptions:{
+          compress: {
+            drop_console: true,
+          }
+        }
+      }),
       new CssMinimizerPlugin()
     ]
   },