Update webpack dev server

ChainSafe · Feb 24, 2025 · c50bbc2 · c50bbc2
1 parent 507f86c
commit c50bbc2
Show file tree

Hide file tree

Showing 3 changed files with 476 additions and 520 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "webdriverio": "^9.2.11",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^5.2.0"
   },
   "resolutions": {
     "@types/react": "^17.0"

diff --git a/packages/simpleserialize.com/webpack.config.js b/packages/simpleserialize.com/webpack.config.js
@@ -1,22 +1,22 @@
-const webpack = require('webpack');
-const { resolve } = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require("webpack");
+const {resolve} = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-const isProd = process.env.NODE_ENV === 'production';
+const isProd = process.env.NODE_ENV === "production";
 
 const config = {
   devtool: "source-map",
-  mode: isProd ? 'production' : 'development',
+  mode: isProd ? "production" : "development",
   entry: {
-    index: './src/index.tsx',
+    index: "./src/index.tsx",
   },
   output: {
-    path: resolve(__dirname, 'dist'),
-    filename: '[name].js',
+    path: resolve(__dirname, "dist"),
+    filename: "[name].js",
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   module: {
     rules: [
@@ -27,68 +27,70 @@ const config = {
         },
       },
       {
-      test: /\.scss$/,
-      use: [
+        test: /\.scss$/,
+        use: [
           MiniCssExtractPlugin.loader,
           {
-            loader: 'css-loader'
+            loader: "css-loader",
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
-            }
-          }
-        ]
-      },{
+            },
+          },
+        ],
+      },
+      {
         test: /\.tsx?$/,
-        use: 'babel-loader',
+        use: "babel-loader",
         exclude: /node_modules/,
-      }
+      },
     ],
   },
   plugins: [
     new webpack.ProvidePlugin({
-      process: 'process/browser',
-      Buffer: ['buffer', 'Buffer'],
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
     }),
     new MiniCssExtractPlugin({
-      filename: 'css/[name].bundle.css'
+      filename: "css/[name].bundle.css",
     }),
     new HtmlWebpackPlugin({
-      title: 'Simple Serialize | Chainsafe Systems',
-      template: 'src/index.html',
+      title: "Simple Serialize | Chainsafe Systems",
+      template: "src/index.html",
     }),
   ],
 };
 
 if (isProd) {
   config.optimization = {
-    minimizer: [
-    ],
+    minimizer: [],
   };
 } else {
   config.devServer = {
     port: 8080, // https://webpack.js.org/configuration/dev-server/#devserverport
     open: true, // https://webpack.js.org/configuration/dev-server/#devserveropen
     hot: true, // https://webpack.js.org/configuration/dev-server/#devserverhot
     compress: true, // https://webpack.js.org/configuration/dev-server/#devservercompress
-    stats: 'errors-only', // https://webpack.js.org/configuration/dev-server/#devserverstats-
-    overlay: true, // https://webpack.js.org/configuration/dev-server/#devserveroverlay
+    client: {
+      overlay: true, // https://webpack.js.org/configuration/dev-server/#overlay
+      logging: "error", // https://webpack.js.org/configuration/dev-server/#logging
+    },
   };
 }
 
 const workerConfig = {
   name: "worker",
   resolve: {
-    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
   entry: {
-    index: './src/components/worker/index.ts',
+    index: "./src/components/worker/index.ts",
   },
   output: {
-    path: resolve(__dirname, 'dist'),
-    filename: 'worker.js',
+    path: resolve(__dirname, "dist"),
+    filename: "worker.js",
   },
   module: {
     rules: [
@@ -100,21 +102,21 @@ const workerConfig = {
       },
       {
         test: /worker?$/,
-        loader: 'threads-webpack-plugin',
+        loader: "threads-webpack-plugin",
       },
       {
         test: /\.ts?$/,
-        use: 'babel-loader',
+        use: "babel-loader",
         exclude: /node_modules/,
-      }
+      },
     ],
   },
   plugins: [
     new webpack.ProvidePlugin({
-      process: 'process/browser',
-      Buffer: ['buffer', 'Buffer'],
+      process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
     }),
-  ]
-}
+  ],
+};
 
 module.exports = [config, workerConfig];