Webpack-dev-serveur sert d'une liste de répertoire au lieu de la page de l'application

Webpack-dev-serveur sert d'une liste de répertoire au lieu de la page de l'application

Je ne peux voir l'application en vertu de l' /public.

Les configs 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()
  ]

};

De la hiérarchie du projet est:

  • application

    • js

  • node_modules

  • public

    • css

    • img

    bundle.js

    index.html

  • paquet.json

  • webpack.config.js

Comment puis-je modifier assurez-vous que le http://localhost:8080/ entrée est de l'application en soi?

InformationsquelleAutor Jason Lam | 2015-10-28
  1. 65

    Si vous utilisez webpack du serveur de dev, vous pouvez passer des options à utiliser /public comme un répertoire de base.

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

    Voir le webpack configuration docs, et plus précisément à la webpack serveur de dev docs pour plus d'options et d'informations générales.

    • Il fonctionne! Merci!!!! Je vais aller plonger dans la documentation dès maintenant.
    • Merci pour cette réponse, ça m'a fait décoller. Aussi merci de poster les liens vers les documentations.
    • Qu'en est webpack 2? J'ai lu les docs et je ne pouvais pas comprendre moi-même.
    • vous allez avoir à mettre publicPath bien ainsi. Je vais mettre à jour pour répondre à l'inclure.
    • Je ne sais pas comment on a pu le deviner à partir de la documentation. Je vous remercie. Peut-être envisager de réécrire une partie de la documentation sur ces propriétés?
    InformationsquelleAutor Sandals
  2. 15

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

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

    Dans mon cas, j'ai mal orthographié 'index.html' lorsque j'ai créé la 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'
});
    • J'ai eu le même problème, mal orthographié mon index.html fichier, merci beaucoup...
    InformationsquelleAutor spencer.sm
  4. 0

    Que j'avais accidentellement supprimé index.html et puis j'ai eu seulement le répertoire de la liste.

    InformationsquelleAutor Tobias K