Modified webpack.config.js and package.json to optimise the project b…

…uild.

react-frontend/package.json

@@ -4,13 +4,13 @@
   "description": "- react@18",
   "main": "index.js",
   "scripts": {
-    "start": "webpack serve --config ./webpack.config.js --mode development",
+    "start": "webpack serve --env dev",
+    "build": "webpack --env production",
+    "lint": "eslint src/**/*.{js,jsx}",
+    "lint:fix": "eslint --fix src/**/*.{js,jsx}",
     "predeploy": "npm run build",
-    "lint:fix": "eslint --fix",
-    "lint": "eslint ./src/*",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "webpack --mode production"
+    "build-storybook": "storybook build"
   },
   "author": "",
   "license": "ISC",
@@ -39,6 +39,7 @@
     "@storybook/react-webpack5": "^8.1.5",
     "@storybook/test": "^8.1.5",
     "babel-loader": "^9.1.3",
+    "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -56,5 +57,10 @@
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ]
 }

react-frontend/webpack.config.js

@@ -3,20 +3,22 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ESLintPlugin = require('eslint-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 module.exports = (env) => {
   return {
     mode: env.dev ? 'development' : 'production',
     entry: './src/index.js',
     output: {
-      filename: 'main.js',
-      path: path.resolve(__dirname, 'dist')
+      filename: env.dev ? '[name].js' : '[name].[contenthash].js',
+      path: path.resolve(__dirname, 'dist'),
+      publicPath: '/'
     },
     devtool: env.dev ? 'eval-source-map' : 'source-map',
     module: {
       rules: [
         {
-          test: /.(js|jsx)$/,
+          test: /\.(js|jsx)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
@@ -27,32 +29,51 @@ module.exports = (env) => {
         },
         {
           test: /\.css$/,
-          use: [
-            'style-loader',
-            'css-loader' // for styles
-          ]
+          use: ['style-loader', 'css-loader']
+        },
+        {
+          test: /\.(png|svg|jpg|jpeg|gif)$/,
+          type: 'asset/resource'
         }
       ]
     },
+    optimization: {
+      splitChunks: {
+        chunks: 'all'
+      },
+      runtimeChunk: 'single'
+    },
     plugins: [
+      new CleanWebpackPlugin(),
       new ESLintPlugin({
         exclude: ['node_modules', 'dist'],
         context: path.resolve(__dirname, 'src')
       }),
       new HtmlWebpackPlugin({
-        template: 'public/index.html'
+        template: 'public/index.html',
+        minify: !env.dev && {
+          removeComments: true,
+          collapseWhitespace: true,
+          removeRedundantAttributes: true,
+          useShortDoctype: true,
+          removeEmptyAttributes: true,
+          removeStyleLinkTypeAttributes: true,
+          keepClosingSlash: true,
+          minifyJS: true,
+          minifyCSS: true,
+          minifyURLs: true
+        }
       })
     ],
     devServer: {
       static: {
         directory: path.join(__dirname, 'dist')
       },
       allowedHosts: 'all',
-      compress: false,
+      compress: true,
       port: 3000,
-      historyApiFallback: {
-        index: 'index.html'
-      }
+      historyApiFallback: true,
+      hot: true
     }
   }
 }