Jason Lam Jason Lam - 5 months ago 241
Node.js Question

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

enter image description here

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?

Answer

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

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

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