Webpack-dev-server serves a directory list instead of the app page
node.jsReactjsWebpackReactjs FluxWebpack Dev-Servernode.js Problem Overview
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?
node.js Solutions
Solution 1 - node.js
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.
Solution 2 - node.js
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"
}
Solution 3 - node.js
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'
});
Solution 4 - node.js
I had accidently removed index.html and then I got only the directory list.