node.js - react - webpack tutorial español

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

Question

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

Las configuraciones en webpack.config.js está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

• nodo_módulos

• público

  • css

  • img

  bundle.js

  index.html

• package.json

• webpack.config.js

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

Answer 1

Accidentalmente eliminé index.html y luego obtuve solo la lista de directorios.

Answer 2

En mi caso, HTMLWebpackPlugin mal ''index.html'' cuando configuré 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''
});

Answer 3

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

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

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

Answer 4

También puede agregar el --content-base a su script de inicio, p. Ej.

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