Webpack-dev-server serve un elenco di directory invece della pagina dell'app


92

inserisci qui la descrizione dell'immagine

Posso solo vedere l'app reale sotto /public.

Le configurazioni in webpack.config.jssono di seguito:

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 gerarchia del progetto è:

  • app

    • js
  • node_modules

  • pubblico

    • css

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

Come posso modificare per assicurarmi che la http://localhost:8080/voce sia per l'applicazione in sé?

Risposte:


78

Se stai utilizzando il server di sviluppo di webpack, puoi passare le opzioni da utilizzare /publiccome directory di base.

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

Vedere i documenti di configurazione del webpack , e in particolare i documenti del server webpack dev per ulteriori opzioni e informazioni generali.


1
Grazie per questa risposta, mi ha sbloccato. Grazie anche per aver pubblicato i link a entrambe le documentazioni.
Chris Schmitz

3
E il webpack 2? Ho letto i documenti e non sono riuscito a capirlo da solo.
mightyiam

@mightyiam vorrai impostare anche la proprietà publicPath. Aggiornerò per rispondere per includerlo.
Sandals

1
Non so come qualcuno possa capirlo dalla documentazione. Grazie. Forse prendi in considerazione la riscrittura di parte della documentazione su quelle proprietà?
mightyiam

17

Puoi anche aggiungere il --content-baseflag allo script di avvio, ad es

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

4

Nel mio caso, ho sbagliato a scrivere 'index.html'quando ho impostato il file HTMLWebpackPlugin. Controlla i nomi dei file se stai usando questo plugin.

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

questo mi ha aiutato a correggere il fatto che stavo ottenendo un HTML generato automaticamente da webpack. Ora, impostando questo templateparametro posso specificare il mio HTML senza problemi. Molte grazie!
danivicario

1

Avevo rimosso accidentalmente index.html e quindi ho ottenuto solo l'elenco delle directory.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.