dev server

package.json

@@ -71,7 +71,6 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.24",
-    "@types/webpack-dev-server": "^4.7.2",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^5.0.0",

webpack/devServer.js

@@ -0,0 +1,23 @@
+/**
+ * @type {import('webpack-dev-server')}
+ */
+module.exports = {
+  port: 9080,
+  compress: false,
+  devMiddleware: {
+    stats: 'errors-warnings',
+  },
+  client: {
+    overlay: false,
+  },
+  historyApiFallback: {
+    rewrites: [
+      {
+        from: /./,
+        to: '/404.html',
+      },
+    ],
+  },
+  hot: true,
+  open: true,
+}

webpack/webpack.config.js

@@ -3,6 +3,7 @@ const path = require('path')
 const optimization = require('./optimization')
 const rules = require('./rules')
 const plugins = require('./plugins')
+const devServer = require('./devServer')
 
 const rootDir = process.cwd()
 
@@ -56,28 +57,6 @@ module.exports = env => {
       rules: rules(isDev),
     },
     plugins: plugins(isDev),
-    devServer: /** @type {import('webpack-dev-server')} */ {
-      static: {
-        directory: distDir,
-      },
-      port: 9080,
-      compress: !isDev,
-      devMiddleware: {
-        stats: 'errors-warnings',
-      },
-      client: {
-        overlay: false,
-      },
-      historyApiFallback: {
-        rewrites: [
-          {
-            from: /./,
-            to: '/404.html',
-          },
-        ],
-      },
-      hot: isDev,
-      open: true,
-    },
+    devServer: isDev ? devServer : undefined,
   }
 }