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

Question

我只是从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'
}

文件结构：

我所看到的：

Answer 1

我也遇到过这个问题。

原来webpack-dev-middleware不会输出任何文件，而是从内存中提供。快递服务器期待物理文件。

此处，此插件可能有所帮助：https://github.com/gajus/write-file-webpack-plugin