Webpack-dev-server sert une liste de répertoires au lieu de la page de l’application

entrer la description de l'image ici

Je ne peux voir que l’application réelle sous /public .

Les webpack.config.js dans webpack.config.js sont ci-dessous:

 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 hiérarchie du projet est la suivante:

  • app

    • js
  • node_modules

  • Publique

    • css

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

Comment puis-je modifier pour m’assurer que l’entrée http://localhost:8080/ est pour l’application en soi?

Si vous utilisez le serveur de développement de webpack, vous pouvez passer des options à utiliser /public tant que répertoire de base.

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

Reportez-vous aux documents de configuration de Webpack , et en particulier aux documents du serveur Webpack dev pour plus d’options et d’informations générales.

Vous pouvez également append le drapeau --content-base à votre script de démarrage, par exemple

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

Dans mon cas, j’ai mal orthographié 'index.html' lorsque j’ai configuré HTMLWebpackPlugin . Vérifiez vos noms de fichiers si vous utilisez ce plugin.

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