Webpack-dev-server sirve una lista de directorios en lugar de la página de la aplicación

92

ingrese la descripción de la imagen aquí

Solo puedo ver la aplicación real debajo /public.

Las configuraciones en webpack.config.jsestán a continuación:

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 jerarquía del proyecto es:

  • aplicación

    • js
  • node_modules

  • público

    • css

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

¿Cómo puedo modificar para asegurarme de que la http://localhost:8080/entrada es para la aplicación per se?

Jason Lam
fuente

Respuestas:

78

Si está utilizando el servidor de desarrollo de webpack, puede pasar opciones para usar /publiccomo directorio base.

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

Consulte los documentos de configuración del paquete web y, específicamente, los documentos del servidor de desarrollo del paquete web para obtener más opciones e información general.

Sandalias
fuente
1
Gracias por esta respuesta, me despegó. También gracias por publicar los enlaces a ambas documentaciones.
Chris Schmitz
3
¿Qué pasa con el paquete web 2? Leí los documentos y no pude entenderlo por mí mismo.
mightyiam
@mightyiam, también querrá establecer la propiedad publicPath. Actualizaré para responder para incluir eso.
Sandals
1
No sé cómo alguien podría resolver esto a partir de la documentación. Gracias. ¿Quizás considerar reescribir parte de la documentación sobre esas propiedades?
mightyiam
17

También puede agregar la --content-basebandera a su secuencia de comandos de inicio, por ejemplo

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

En mi caso, escribí mal 'index.html'cuando configuré el HTMLWebpackPlugin. Verifique sus nombres de archivo si está usando este complemento.

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
spencer.sm
fuente
esto me ayudó a solucionar el hecho de que estaba obteniendo un HTML generado automáticamente por webpack. Ahora, al configurar este parámetro template, puedo especificar mi propio html sin problemas. ¡Muchas gracias!
danivicario
1

Había eliminado accidentalmente index.html y luego solo obtuve la lista de directorios.

wwwwwwwwwwww
fuente