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

我只是从webpack文档复制粘贴webpack-dev-server + express设置,但是它不起作用,因为服务器找不到要提供的文件。 这个设置有什么问题?

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

文件结构: 在这里输入图像描述

我所看到的: 在这里输入图像描述