fix: compatibility with webpack@5 API (#737)

Author: evilebottnawi

README.md

@@ -351,19 +351,19 @@ Examples of use with other servers will follow here.
 Fastify interop will require the use of `fastify-express` instead of `middie` for providing middleware support. As the authors of `fastify-express` recommend, this should only be used as a stopgap while full Fastify support is worked on.
 
 ```js
-const fastify = require('fastify')()
-const webpack = require('webpack')
-const webpackConfig = require('./webpack.config.js')
-const devMiddleware = require('webpack-dev-middleware')
-
-const compiler = webpack(webpackConfig)
-const { publicPath } = webpackConfig.output
-
-;(async () => {
-  await fastify.register(require('fastify-express'))
-  await fastify.use(devMiddleware(compiler, { publicPath }))
-  await fastify.listen(3000)
-})()
+const fastify = require('fastify')();
+const webpack = require('webpack');
+const webpackConfig = require('./webpack.config.js');
+const devMiddleware = require('webpack-dev-middleware');
+
+const compiler = webpack(webpackConfig);
+const { publicPath } = webpackConfig.output;
+
+(async () => {
+  await fastify.register(require('fastify-express'));
+  await fastify.use(devMiddleware(compiler, { publicPath }));
+  await fastify.listen(3000);
+})();
 ```
 
 ## Contributing

package-lock.json

@@ -48,51 +48,46 @@ export default function wdm(compiler, options = {}) {
 
   setupOutputFileSystem(context);
 
-  let watchOptions;
-
-  if (Array.isArray(context.compiler.compilers)) {
-    watchOptions = context.compiler.compilers.map(
-      (childCompiler) => childCompiler.options.watchOptions || {}
-    );
-  } else {
-    watchOptions = context.compiler.options.watchOptions || {};
-  }
-
   // Start watching
-  context.watching = context.compiler.watch(watchOptions, (error) => {
-    if (error) {
-      // TODO: improve that in future
-      // For example - `writeToDisk` can throw an error and right now it is ends watching.
-      // We can improve that and keep watching active, but it is require API on webpack side.
-      // Let's implement that in webpack@5 because it is rare case.
-      context.logger.error(error);
+  if (context.compiler.watching) {
+    context.watching = context.compiler.watching;
+  } else {
+    let watchOptions;
+
+    if (Array.isArray(context.compiler.compilers)) {
+      watchOptions = context.compiler.compilers.map(
+        (childCompiler) => childCompiler.options.watchOptions || {}
+      );
+    } else {
+      watchOptions = context.compiler.options.watchOptions || {};
     }
-  });
-
-  return Object.assign(middleware(context), {
-    waitUntilValid(callback) {
-      // eslint-disable-next-line no-param-reassign
-      callback = callback || noop;
 
-      ready(context, callback);
-    },
-
-    invalidate(callback) {
-      // eslint-disable-next-line no-param-reassign
-      callback = callback || noop;
-
-      ready(context, callback);
+    context.watching = context.compiler.watch(watchOptions, (error) => {
+      if (error) {
+        // TODO: improve that in future
+        // For example - `writeToDisk` can throw an error and right now it is ends watching.
+        // We can improve that and keep watching active, but it is require API on webpack side.
+        // Let's implement that in webpack@5 because it is rare case.
+        context.logger.error(error);
+      }
+    });
+  }
 
-      context.watching.invalidate();
-    },
+  const instance = middleware(context);
 
-    close(callback) {
-      // eslint-disable-next-line no-param-reassign
-      callback = callback || noop;
+  // API
+  instance.waitUntilValid = (callback = noop) => {
+    ready(context, callback);
+  };
+  instance.invalidate = (callback = noop) => {
+    ready(context, callback);
 
-      context.watching.close(callback);
-    },
+    context.watching.invalidate();
+  };
+  instance.close = (callback = noop) => {
+    context.watching.close(callback);
+  };
+  instance.context = context;
 
-    context,
-  });
+  return instance;
 }