Upgrading webpack dev server.

Author: krulis-martin

bin/dev.js

@@ -35,26 +35,41 @@ app.get('*', (req, res) => {
   });
 });
 
-const server = new WebpackDevServer(webpack(config), {
-  static: {
-    directory: path.join(__dirname, '..', 'public'),
-  },
-  hot: true,
-  port: WEBPACK_DEV_SERVER_PORT,
-  devMiddleware: {
-    stats: { colors: true },
-    publicPath: '/',
+//console.log(webpack(config));
+
+const server = new WebpackDevServer(
+  {
+    static: {
+      directory: path.join(__dirname, '..', 'public'),
+    },
+    hot: true,
+    host: 'localhost',
+    port: WEBPACK_DEV_SERVER_PORT,
+    devMiddleware: {
+      stats: { colors: true },
+      publicPath: '/',
+    },
   },
-});
+  webpack(config)
+);
 
+(async () => {
+  await server.start();
+  console.log(
+    `${colors.yellow('WebpackDevServer')} is running on ${colors.underline(
+      `http://localhost:${WEBPACK_DEV_SERVER_PORT}`
+    )}`
+  );
+})();
+/*
 server.listen(WEBPACK_DEV_SERVER_PORT, 'localhost', () => {
   console.log(
     `${colors.yellow('WebpackDevServer')} is running on ${colors.underline(
       `http://localhost:${WEBPACK_DEV_SERVER_PORT}`
     )}`
   );
 });
-
+*/
 app.listen(PORT, () => {
   console.log(`${colors.green('WebApp')} is running on ${colors.underline(`http://localhost:${PORT}`)}`);
 });

config/webpack.config-dev.js

@@ -19,12 +19,13 @@ const gitRevisionPlugin = new GitRevisionPlugin({
 });
 
 module.exports = {
-  devtool: process.env.NODE_ENV === 'development' ? 'source-map' : 'none',
+  devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'none',
   entry: path.join(__dirname, '..', 'src/client.js'),
   output: {
     filename: 'bundle.js',
     path: path.join(__dirname, '..', 'public'),
     publicPath: '/public/',
+    //sourceMapFilename: '[name].js.map',
   },
   mode: 'development',
   resolve: {

package.json

@@ -163,8 +163,8 @@
     "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.92.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-middleware": "^6.1.3",
-    "webpack-dev-server": "^4.15.2",
+    "webpack-dev-middleware": "^7.2.1",
+    "webpack-dev-server": "^5.0.4",
     "webpack-isomorphic-tools": "^4.0.0"
   },
   "packageManager": "[email protected]"