Webpack-dev-server找不到要提供的文件

我只是從webpack文檔複製粘貼的webpack-dev-server + express設置，但它不起作用，因爲服務器無法找到要提供的文件。這個設置有什麼問題？Webpack-dev-server找不到要提供的文件

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' 
}

文件結構：