node.js - Webpack-dev-server 显示目录列表而不是应用程序页面

Question

我正在使用 React 构建渐进式 Web 应用程序，并且正在使用 Webpack 开发服务器。

我的网络应用程序配置:

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080',
        'webpack/hot/only-dev-server',
        './src/index.jsx'
    ],
    output: {
        path: path.join(__dirname,'public'),
        filename: 'bundle.js',
         publicPath: 'http://localhost:8080'
    },
    devServer: {
        contentBase: "./public",
        hot: true
    },
    resolve: {
        modulesDirectories: ['node_modules','src'],
        extensions: ['','.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot','babel?presets[]=react,presets[]=react,presets[]=es2015']
            }

        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

这是我的目录结构:

请帮我解决这个问题，因为我看不到我的index.html。 我的配置文件有问题吗

Answer 1

您的index.html位于文件夹“src”中 所以你的 webpack.config.js 应该像这样:

devServer: {
    contentBase: "./src",
    hot: true
},