Webpack-dev-server liefert eine Verzeichnisliste anstelle der App-Seite

89

Ich kann nur die aktuelle App unter sehen /public.

Die Konfigurationen in webpack.config.jssind unten:

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

};

Die Projekthierarchie lautet:

App
- js
Knotenmodule
Öffentlichkeit
- CSS
- img
bundle.js

index.html
package.json
webpack.config.js

Wie kann ich Änderungen vornehmen, um sicherzustellen, dass der http://localhost:8080/Eintrag für die Anwendung an sich bestimmt ist?

— Jason Lam
quelle

76

Wenn Sie den Entwicklungsserver von webpack verwenden, können Sie Optionen übergeben, die /publicals Basisverzeichnis verwendet werden sollen.

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

Weitere Optionen und allgemeine Informationen finden Sie in den Webpack-Konfigurationsdokumenten und insbesondere in den Webpack-Entwicklungsserverdokumenten .

— Sandalen
quelle

1

Danke für diese Antwort, sie hat mich losgelassen. Vielen Dank auch für die Veröffentlichung der Links zu beiden Dokumentationen.

— Chris Schmitz

3

Was ist mit Webpack 2? Ich habe die Dokumente gelesen und konnte es selbst nicht herausfinden.

— Mayyiam

@mightyiam Sie möchten auch die publicPath-Eigenschaft festlegen. Ich werde aktualisieren, um zu antworten, um das einzuschließen.

— Sandalen

1

Ich weiß nicht, wie jemand das aus der Dokumentation herausfinden könnte. Danke dir. Vielleicht möchten Sie einen Teil der Dokumentation zu diesen Eigenschaften neu schreiben?

— Mayyiam

17

Sie können das --content-baseFlag auch zu Ihrem Startskript hinzufügen , z

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

— kcstricks
quelle

4

In meinem Fall habe ich falsch geschrieben, 'index.html'als ich das eingerichtet habe HTMLWebpackPlugin. Überprüfen Sie Ihre Dateinamen, wenn Sie dieses Plugin verwenden.

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

— spencer.sm
quelle

Dies half mir, die Tatsache zu beheben, dass ich ein automatisch generiertes HTML per Webpack erhielt. Durch Einstellen dieses templateParameters kann ich jetzt problemlos mein eigenes HTML angeben. Vielen Dank!

— Danivicario

1

Ich hatte versehentlich index.html entfernt und dann nur die Verzeichnisliste erhalten.

— wwwwwwwwwwww
quelle