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

【问题标题】：Webpack-dev-server doesn't find files to serveWebpack-dev-server 找不到要提供的文件
【发布时间】：2018-01-15 23:51:45
【问题描述】：

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

文件结构：

我所看到的：

【问题讨论】：

已订阅。也面临同样的问题。我通过快递服务来自公共和静态的资产。我将配置中的公共路径传递到中间件，但它没有看到它，所以我每次都必须重新编译。

标签： node.js express webpack webpack-dev-server webpack-dev-middleware

【解决方案1】：

我也遇到过这个问题。

原来 webpack-dev-middleware 不输出任何文件，而是从内存中提供服务。虽然 express 服务器需要物理文件。

在这里，这个插件可能会有所帮助：https://github.com/gajus/write-file-webpack-plugin

【讨论】：