diff --git a/examples/web/package.json b/examples/web/package.json
index af7ca620c9..107c379fe9 100644
--- a/examples/web/package.json
+++ b/examples/web/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "docker:start": "cd ./docker && docker-compose down && docker-compose up",
     "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
-    "start": "webpack-dev-server -d --progress --colors --port 8090 --config webpack.config.js --hot --inline --host 0.0.0.0 --content-base examples"
+    "start": "webpack-dev-server --progress --color --port 8090 --config ./webpack.config.js --hot --host 0.0.0.0"
   },
   "repository": {
     "type": "git",
@@ -31,8 +31,8 @@
     "babel-loader": "^8.3.0",
     "ts-loader": "^6.2.2",
     "webpack": "5.89.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.3",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.0.0",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
diff --git a/examples/web/webpack.config.js b/examples/web/webpack.config.js
index fd3de03bb4..31905640e1 100644
--- a/examples/web/webpack.config.js
+++ b/examples/web/webpack.config.js
@@ -49,7 +49,7 @@ const common = {
 module.exports = webpackMerge(common, {
   devtool: 'eval-source-map',
   devServer: {
-    contentBase: path.resolve(__dirname),
+    static: path.resolve(path.join(__dirname, "examples")),
   },
   plugins: [
     new webpack.DefinePlugin({