Webpack-dev-server serve un elenco di directory invece della pagina dell’app

inserisci la descrizione dell'immagine qui

Posso vedere solo l’app effettiva sotto /public .

Le webpack.config.js in webpack.config.js sono qui sotto:

 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() ] }; 

La gerarchia del progetto è:

Come posso modificare per assicurarmi che http://localhost:8080/ entry sia per l’applicazione di per sé?

Se stai usando il server dev di webpack puoi passare in opzioni per usare /public come directory di base.

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

Vedi i documenti di configurazione del webpack , e in particolare i documenti del server di webpack dev per maggiori opzioni e informazioni generali.

Puoi anche aggiungere il --content-base allo script di avvio, ad es

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

Nel mio caso, ho sbagliato a HTMLWebpackPlugin 'index.html' quando ho configurato HTMLWebpackPlugin . Controlla il tuo nome di file se stai usando questo plugin.

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