Webpack-dev-Server findet keine Dateien zu bedienen

Question

Ich kopierte einfach webpack-dev-server + Express-Einstellungen von Webpack-Dokumentation, aber es funktioniert nicht, weil der Server keine Dateien finden kann. Was ist falsch an dieser Einrichtung?

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

Dateistruktur:

, was ich sehe:

Answer 1

ich auf diese kam auch Problem.

Stellt sich heraus, dass webpack-dev-middleware keine Dateien ausgibt, stattdessen aus dem Speicher dient. Während der Express-Server physische Dateien erwartet.

Hier könnte dieses Plugin helfen: https://github.com/gajus/write-file-webpack-plugin