Webpack-dev-serverが提供するファイルが見つかりません

Question

webpack-dev-server + expressの設定をwebpack docsからコピーしましたが、サーバーがファイルを見つけることができないため動作しません。この設定で何が問題になりますか？

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

ファイル構造：

私が見るもの：

Answer 1

また、私はこの出くわしました問題。

Webpack-devミドルウェアはファイルを出力せず、メモリからサービスを提供しています。エクスプレスサーバーは物理ファイルを要求しています。ここで

、このプラグインは役立つかもしれない：https://github.com/gajus/write-file-webpack-plugin