Webpack-Dev-Middleware, Express and Webpack generated views. How is this suppose to work?

Question

• publicPath in Webpack config is set to /contents/dist/assets/
• a view file in Express uses handlebars

• in Webpack config, handlebars template is setup to output correct script tags / link stylesheet..

  new HtmlWebpackPlugin({
    template: 'views/index.handlebars',
    filename: 'views/index.handlebars',
  }),
  

  So this also output to /contents/dist/assets/ under views folder. Thus, /contents/dist/assets/views is where it will be output.

• and in Express, a route is setup to serve this file.
  route.get('*', (req, res) => {
  res.render('index' .....)

And...
- I've setup webpack-dev-middleware to serve assets

  const webpack = require('webpack');
  const webpackDevMiddleware = require('webpack-dev-middleware');
  const config = require('../../webpack.config');
  const compiler = webpack(config);

  const app = express();

  app.use(webpackDevMiddleware(compiler, config.devServer));

• I've set up a new CleanWebpackPlugin() plugin, to delete the contents of the dist folder before each build, so it start with a fresh empty folder.

How is this suppose to actually work?

Express is looking for the view where I've told it to look.

const viewsDir = resolve(__dirname, '../../client/views');
app.set('views', viewsDir);

When I run webpack, it delete the contents of the dist folder so the view is not there. BUT, isn't webpack-dev-middleware suppose to serve all these assets (HTML, Handlebars, etc) via memory? Not the file system? When Express hits the / route, there is no view to serve.

How is all this suppose to hook together and work?