Webpack-dev-server doesn't find files to serve

Question

I just copy-pasted webpack-dev-server + express settings from webpack docs, but it doesn't work because the server can't find files to serve. What is wrong with this setup?

server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('../webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
})); 
/*app.use('/',express.static('public')) it works when used insted of webpack dev middleware */
// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

webpack.config.js

const path = require('path');
const webpack = require('webpack');

const scssRules = {
    test:/\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
};

const jsRules = {
    test: /\.js$/,
    use: [
        {loader: 'babel-loader'}
    ]
};

module.exports = {
    entry: './js/App.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
        publicPath: '/'
    },
    module: {
        rules: [
            jsRules,
            scssRules
        ]
    },
    devServer: {
        contentBase: './public'
    },  
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
  devtool: 'inline-source-map'
}

File structure:

What i see:

Answer 1

I also came across this problem.

Turns out webpack-dev-middleware doesn't output any files, instead serves from memory. While the express server is expecting physical files.

Here, this plugin might help: https://github.com/gajus/write-file-webpack-plugin