Webpack-dev-server serves a directory list instead of the app page

Question

I can only see the actual app under /public.

The configs in webpack.config.js are below:

var path    = require(\'path\         


        

Answer 1

If you're using webpack's dev server you can pass in options to use /public as a base directory.

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
},

See the webpack configuration docs, and specifically the webpack dev server docs for more options and general information.

Answer 2

In my case, I misspelled 'index.html' when I set up the HTMLWebpackPlugin. Double check your filenames if you're using this plugin.

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

Answer 3

I had accidently removed index.html and then I got only the directory list.

Answer 4

You can also add the --content-base flag to your start-up script, e.g.

    "scripts": {
        "start:dev": "webpack-dev-server --inline --content-base ./public"
    }