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');
var webpack = require('webpack');

module.exports = {

  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/js/App.js'
],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      }
     ]
   },

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

};

The project hierarchy is:

• app

  • js

• node_modules

• public

  • css

  • img

  bundle.js

  index.html

• package.json

• webpack.config.js

How can I modify to make sure the http://localhost:8080/ entry is for the application per se?

Underhung

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.

Goebbels

Thanks for this answer, it got me unstuck. Also thanks for posting the links to both documentations. – Hexamerous

What about webpack 2? I read the docs and couldn't figure it out myself. – Jackal

@mightyiam you're going to want to set publicPath property as well. I'll update to answer to include that. – Goebbels

I don't know how anyone could figure this out from the documentation. Thank you. Perhaps consider rewriting some of the documentation on those properties? – Jackal

Answer 2

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

Tuyere

Answer 3

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

Neff

this helped me to fix the fact that I was getting an autogenerated HTML by webpack. Now, by setting this template param I can specify my own html with no problem. Thanks a lot! – Eun

This is quite hard to debug, any tip to check what final path are used by webpack-dev-server? – Enteric

Answer 4

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

Decagram