JavaScript-Datei nicht im Browser gefunden, aber richtig kompiliert

Ich ging durch eine React-Einführung in Microsoft Virtual Academy gefunden und heruntergeladen den Code in der zugehörigen GitHub repo gefunden. An dieser Stelle versuche ich einfach, dass meine einfache Index.html Seite einen leeren React Div Tag erstellt.JavaScript-Datei nicht im Browser gefunden, aber richtig kompiliert

Ich habe jedoch Probleme beim Einrichten meiner UmgebungI installiert node.js, heruntergeladen den Startcode von Github, habe meine Npm installieren und beim Kompilieren bekam den Fehler "Breaking Change: Es ist nicht mehr erlaubt, den '-loader' wegzulassen Wenn Sie Loader verwenden, müssen Sie den Datei-Loader anstelle der Datei angeben. Ich habe diesen Fehler behoben, indem ich den webpack.config.js -HTML-Loader unter modul von "file? name = [name]. [ext]" in "file" geändert habe -loader? name = [Name]. [ext] ".

Allerdings habe ich beim Kompilieren einen Fehler erhalten, der besagt:" Konflikt: Mehrere Assets geben den gleichen Dateinamen aus ". Ich habe diesen Fehler behoben, indem ich die Ausgabe geändert habe Dateiname in der Datei webpack.config.js von bundle.js nach [Name] .js.

Dann kompiliert es gut, aber wenn ich es im Browser anschaute, bemerkte ich, dass ein Fehler war, der sagte "der Server hat nichts gefunden, das der angeforderten URI entspricht" und erwähnt app.js.

Ich habe versucht, den Aufruf in meiner Index.html zu app.js zu ändern, aber auch den gleichen Fehler zu bekommen. Ich habe versucht, den Code in meiner app.js zu löschen, so dass es vollständig leer ist und immer noch den angeforderten URI-Fehler erhalten. Unten ist mein sehr einfachen Code ...

webpackag.config.js`var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname, 'app'), 
    entry: { 
    javascript: './app.js', 
    html: './index.html' 
    }, 
  output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].js' 
    }, 
  module: { 
    loaders: [ 
     { 
     test: /.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.html$/, 
     loader: "file-loader?name=[name].[ext]", 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     { 
     test: /\.png$/, 
     loader: "url-loader?limit=100000" 
     }, 
     { 
     test: /\.jpg$/, 
     loader: "file-loader" 
     } 
    ] 
  }, 
    devServer: { 
    historyApiFallback: true 
    } 
};

-Code für Index.HTML ... `

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Pizza Bot Manager</title> 
    <link rel="stylesheet" href="/app/app.css"> 
</head> 
<body> 
    <div id="main"> 
    </div> 
    <script src="./app.js"></script> 
</body> 
</html>

App.Js Code unten ...

var React = require('react'); 
var ReactDom = require('react-dom'); 

var App = React.createClass({ 
    render: function() { 
    return (
     <div>   
     </div> 
    ) 
    } 
}); 

ReactDOM.render(<App />, Document.getElementById("main"));

` Sehr neu zu Reagieren, also wenn jemand irgendwelche Vorschläge zur Lösung dieses Fehlers hat, würde ich es sehr schätzen

Fehler wie es erscheint in der Browser Konsole

HTTP404: NICHT GEFUNDEN - Der Server hat nichts gefunden, das dem angeforderten URI (Uniform Resource Identifier) entspricht. GET - http://localhost:8080/app.js

Quelle

2017-05-05 jgoraya

Sie sagen, der Fehler erwähnt ‚bundle.js‘, aber ich sehe nicht, bundle.js verwiesen überall in Ihrem Code. Könnten Sie den gesamten Fehler, den Sie im Browser sehen, posten? Außerdem könntest du versuchen, [name] .js zurück zu bundle.js zu ändern und die html-Eigenschaft unter 'entry' zu entfernen. – hansn

@hansn danke für deine Bewertung. Ich habe ein paar Dinge einschließlich Bundle.js versucht und nur die spezifische js-Datei aus meiner Index.html aufgerufen, was ist, was ist derzeit. Ich habe den Beitrag bearbeitet, um den Fehler von der Konsole zu enthalten und aktualisierte auch meinen Beitrag, um den Verweis auf bundle.js zu entfernen und änderte ihn in app.js – jgoraya

@hansn auch ich versuchte Ihren Vorschlag des Entfernens der HTML-Eigenschaft unter Eintrag, änderte die Ausgabedateiname-Eigenschaft zu bundle.js von [Name] .js und aktualisiert dann die Index.html, um auf ./bundle.js zu verweisen und kompiliert zu werden. Ich bekomme den gleichen Fehler 404 außer dem GET-Teil des Fehlers status http: // localhost: 8080/bundle.js – jgoraya

OK sieht aus wie Klammern um meine Eingabe Hinzufügen von Dateien in der webpack.config.js die 404-Fehler zu beheben schien. Siehe aktualisiert „Eintrag“ Code unten für die Auflösung, anderen zu helfen, die dieses Problem haben ...

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    context: path.join(__dirname, 'app'), 
    /*entry: { 
    html: './index.html', 
    javascript: './app.js' 
    },*/ 
    entry: ['./index.html','./app.js'], 
  output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
  module: { 
    loaders: [ 
     { 
     test: /.js?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.html$/, 
     loader: "file-loader?name=[name].[ext]", 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     { 
     test: /\.png$/, 
     loader: "url-loader?limit=100000" 
     }, 
     { 
     test: /\.jpg$/, 
     loader: "file-loader" 
     } 
    ] 
  }, 
    devServer: { 
    historyApiFallback: true 
    } 
};

Quelle

2017-05-05 22:19:31 jgoraya

JavaScript-Datei nicht im Browser gefunden, aber richtig kompiliert

Antwort

Verwandte Themen