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

92

entrez la description de l'image ici

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

Les configurations dans webpack.config.jssont 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:

  • 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' http://localhost:8080/entrée est pour l'application en soi?

Jason Lam
la source

Réponses:

78

Si vous utilisez le serveur de développement de webpack, vous pouvez transmettre des options à utiliser /publiccomme répertoire de base.

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

Consultez la documentation de configuration du Webpack , et plus particulièrement la documentation du serveur de développement Webpack pour plus d'options et des informations générales.

Des sandales
la source
1
Merci pour cette réponse, ça m'a décoché. Merci également d'avoir publié les liens vers les deux documentations.
Chris Schmitz
3
Qu'en est-il du Webpack 2? J'ai lu les documents et je n'ai pas pu le comprendre moi-même.
mightyiam
@mightyiam, vous allez également vouloir définir la propriété publicPath. Je vais mettre à jour pour répondre pour inclure cela.
Sandales
1
Je ne sais pas comment quelqu'un pourrait comprendre cela à partir de la documentation. Merci. Peut-être envisager de réécrire une partie de la documentation sur ces propriétés?
mightyiam
17

Vous pouvez également ajouter le --content-basedrapeau à votre script de démarrage, par exemple

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

Dans mon cas, j'ai mal orthographié 'index.html'lorsque j'ai configuré le fichier 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'
});
spencer.sm
la source
cela m'a aidé à corriger le fait que je recevais un HTML généré automatiquement par webpack. Maintenant, en définissant ce paramètre, templateje peux spécifier mon propre html sans problème. Merci beaucoup!
danivicario
1

J'avais accidentellement supprimé index.html, puis je n'ai obtenu que la liste des répertoires.

wwwwwwwwwwww
la source