title: Webpack : Cannot read property 'readFile' of undefined, No output files
body: <p>Using <code>webpack &gt; 5</code> version. Below is my <code>appDevMiddleware.js</code>congifuration</p>
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const webpackHotMiddleware = require('webpack-hot-middleware');
  
  function createWebpackMiddleware(compiler, publicPath) {
  return webpackDevMiddleware(compiler, {
      // noInfo: true,
      publicPath,
      // silent: true,
      stats: 'errors-only',
  });
  }
  
  module.exports = function addDevMiddlewares(app, webpackConfig) {
  const compiler = webpack(webpackConfig);
  const middleware = createWebpackMiddleware(compiler, webpackConfig.output.publicPath);
  
  app.use(middleware);
  app.use(webpackHotMiddleware(compiler));
  
  // Since webpackDevMiddleware uses memory-fs internally to store build
  // artifacts, we use it instead
  const fs = middleware.fileSystem;
  
  app.get('*', (req, res) =&gt; {
      fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) =&gt; {
      if (err) {
          res.sendStatus(404);
      } else {
          res.send(file.toString());
      }
      });
  });
  };
  </code></pre>
  <p>When i do <code>npm start</code> of my React App, i'm getting</p>
  <pre><code>TypeError: Cannot read property 'readFile' of undefined
  at D:\master-instore-dashboard\server\middlewares\addDevMiddlewares.js:29:8
  </code></pre>
  <p>This is exactly showing here</p>
  <pre><code>fs.readFile(path.join(compiler.outputPath, 'index.html'), (err, file) =&gt; {
  </code></pre>
  <p>I will have to somehow use the <code>promises</code> for readFile which is something like <code>const { readFile } = require('fs').promises</code></p>
  <p>How should i replace <code> const fs = middleware.fileSystem;</code> with promise for this issue?</p>