Il server di sviluppo Webpack non può caricare URL annidati (errore GET 404)

Attualmente sto configurando un sito che utilizza un server webpack-dev e un router backbone.Il server di sviluppo Webpack non può caricare URL annidati (errore GET 404)

Fino ad oggi, tutto sembrava funzionare (ad esempio potrei andare a http://localhost:3333 per la mia home page e http://localhost:3333/login per la mia pagina di login.

Ma oggi ho provato ad andare al mio primo URL nidificato, http://localhost:3333/people/1, e la mia console gettare un errore 404 GET

l'errore esatto è stato questo:.. http://localhost:3333/people/build/bundle.js 404 (Not Found)

sembra che il mio server webpack sta provando a cercare i file corretti al server sotto la directory sbagliato Se questo è corretto, Non ne ho idea come risolvere questo problema. Ho esaminato altre domande di overflow dello stack e problemi di github, ma inutilmente. qualche idea?

Avvio il server utilizzando gulp. Qui è la mia gulpfile:

var gulp = require("gulp"); 
var webpack = require("webpack"); 
var server = require("webpack-dev-server"); 
var config = require("./webpack.config"); 

gulp.task("serve", function() { 
    new server(webpack(config), { 
    publicPath: config.output.publicPath, 
    historyApiFallback: true, 
    hot: true, 
    quiet: false, 
    stats: { colors: true, progress: true }, 
    }).listen(3333, "localhost", function (err, result) { 
    if (err) { 
     console.log(err); 
    } else { 
     console.log("Listening at localhost:3333!"); 
    } 
    }); 
}); 

gulp.task("default", ["serve"]);

Ecco il mio webpack file di configurazione:

var webpack = require("webpack"); 

module.exports = { 
    entry: [ 
    __dirname + "/app/app.js", 
    "webpack/hot/dev-server", 
    "webpack-dev-server/client?http://localhost:3333/", 
    ], 
    output: { 
    path: __dirname + "/build", 
    filename: "bundle.js", 
    publicPath: "http://localhost:3333/", 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { test: /\.jsx$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" }, 
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, 
     { test: /\.scss$/, exclude: /node_modules/, loader: "style!css!sass" }, 
    ] 
    }, 
    resolve: { 
    root: __dirname, 
    extensions: ["", ".js", ".jsx"], 
    }, 
}

Edit: ho appena scoperto che posso direttamente colpire gli URL http://localhost:3333/#/people/1 o http://localhost:3333/#people/1 e tutto funziona come previsto.

Esiste una configurazione che mi consenta di non includere il simbolo della sterlina nell'url? Spero che questo aiuti a dare più contesto alla mia domanda.

Follow-up: dispongo di un componente globale App che inizializza un router backbone e chiama Backbone.history.start({ pushState: true }). Ecco uno snippet di codice.

class App { 

    constructor() { 
    console.log("starting up"); 
    this.Router = new Router(); 
    Backbone.history.start({ pushState: true }); 
    } 
} 

module.exports = new App();

Se si nota la console.log nel costruttore, questo si chiama su pagine non nidificati che possono rendere, ma non sulle pagine nidificate che non possono.

fonte

2015-05-03 Warren

Alla fine ho trovato la risposta al mio problema.

Il mio file index.html che è stato caricato in ogni pagina utilizzata per assomigliare a questo:

<!DOCTYPE html> 
<html> 
    <head> 
    ... 
    </head> 
    <body> 
    <script type="text/javascript" src="./build/bundle.js" charset="utf-8"></script> 
    </body> 
</html>

Poiché la sorgente dello script è stato un percorso relativo, lo script non è stato trovato su URL nidificate.

Cambiare la fonte per questo risolto:

<script type="text/javascript" src="http://localhost:3333/build/bundle.js" charset="utf-8"></script>

fonte

2015-05-04 05:57:18 Warren

I bug più ovvi a volte sono i più difficili da individuare. Grazie per avermi risparmiato tempo e frustrazione :) – Pandaiolo

Esiste una configurazione che mi consenta di non includere il simbolo di cancelletto nell'url?

Questo non ha nulla a che fare con il webpack ma con il modo in cui la vostra applicazione gestisce il routing. Ho il sospetto che si sta utilizzando React-Router e si dovrebbe cercare nella sezione intitolata

What's it look like?

Nel blocco di codice:

// Or, if you'd like to use the HTML5 history API for cleaner URLs: 

Router.run(routes, Router.HistoryLocation, function (Handler) { 
    React.render(<Handler/>, document.body); 
});

Se si utilizza la storia Backbone, controllare "push stato" in this paragraph

fonte

2015-05-04 04:38:11

Grazie per la risposta. Attualmente sto usando un router backbone e in realtà sto chiamando 'Backbone.history.start ({pushState: true})'. Lo chiamo nel mio componente globale 'App'. Ho modificato la mia domanda per riflettere questo! – Warren

Stai ancora ottenendo hash? Usando il vecchio IE? Ho provato 'Backbone.history.start ({pushState: true, hashChange: false}).'? –

Utilizzo di chrome. Grazie per il suggerimento, ma non funziona. Penso che abbia a che fare con l'errore della console che sto ottenendo, che è 'http: // localhost: 3333/people/build/bundle.js 404 (Not Found)'. L'ambito di '/ build/bundle.js' sotto'/people' sembra sbagliato anche a te? – Warren

So che questa domanda è già stato risposto, ma ho avuto lo stesso identico problema e ho pensato di condividere la mia situazione. Proprio come la soluzione scelta da Warren, il bug era sul mio index.html. In origine si presentava così:

<script src="./bundle.js"></script>

ho visto la soluzione elencati qui per mettere il percorso completo, ma che non funziona per me, perché mi piacerebbe eseguire questo a livello locale e nella produzione. L'ho semplicemente modificato in questo modo: (rimosso il '.')

<script src="/bundle.js"></script>

E ha risolto completamente il problema per me.

fonte

2016-05-16 04:27:34 jmancherje

Il server di sviluppo Webpack non può caricare URL annidati (errore GET 404)

risposta

Problemi correlati