Webpack-dev-server serves for a directory listing instead of an application page

Question

I can only see the actual application under /public .

The configurations in webpack.config.js are given 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() ] }; 

Project Hierarchy:

• application

  • Js

• node_modules

• public

  • CSS

  • IMG

  bundle.js

  index.html

• package.json

• webpack.config.js

How can I change to make sure that the http://localhost:8080/ entry for the application is on its own?

Answer 1

If you use the webpack dev server, you can pass options to use /public as the base directory.

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

See the documentation for configuring the web package and, in particular, the documentation for the web package developer server for additional options and general information.

Answer 2

You can also add the --content-base flag to your script run, for example.

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

Answer 3

In my case, I made the mistake of 'index.html' when setting up HTMLWebpackPlugin . Double check your file names if you use this plugin.

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

Answer 4

I accidentally deleted index.html and then only got a list of directories.