Webpack für React funktioniert nicht

Ich bin nur zu Beginn React und habe codecademy Kurse und mehrere andere auf youtube beendet. Ich entscheide mich, meinen lokalen Rechner für die Reaktion zu konfigurieren. Ich habe mit webpack & webpack-dev-server begonnen. Und hier bekomme ich einen Fehler. Here is mistake screenshot Webpack für React funktioniert nicht

Also Here is my files tree

Hier ist meine webpack.config.js:

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

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:8080/', 
     'webpack/hot/only-dev-server', 
     './src' 
    ], 
    output: { 
      path: path.join(__dirname, 'public'), 
      filename: "bundle.js" 
    }, 
    resolve: { 
     modulesDirectories: ['node_modules', 'src'], 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loader: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] 
     } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin() 
    ] 
};

Meine index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>React ToDos App</title> 
</head> 
<body> 
    <div id="app" /> 
    <script src="bundle.js"></script> 
</body> 
</html>

Und index.js:

let message = 'Hello from entry message'; 

console.log(message);

Danke für jede Hilfe.

Quelle

2016-10-17 Kirill Stas

Haben Sie Express statischen Ordner Setup in Ihrem 'index.js' Datei? –

Was meinst du? Ich bin immer noch nicht so progressiv. –

[Serving statische Dateien in Express] (https://expressjs.com/de/starter/static-files.html), müssen Sie auch die Ausgabe in Ihrem öffentlichen Ordner angeben. –

Ich sehe zwei Probleme in Ihrem Code:

Der Name js Bündel sollte gleich in HTML und in webpack - Sie verwenden ready.js in webpack config und bundle.js in Ihrem HTML.
Auf dem Screenshot haben Sie einen Tippfehler und Namen webpack config webpack.congig.js, aber es sollte webpack.config.js sein (das standardmäßig von webpack-dev-Server verwendet wird)

Quelle

2016-10-17 15:56:26

Vielen Dank. Die zweite ist die Antwort. Wer das gelesen hat, sei vorsichtig in deinem Code. –

In Ihrer webpack Konfiguration setzen Sie die Ausgabe filename als ready.js und in Ihrem HTML suchen Sie nach bundle.js. Dies ist der Grund für den Fehler. Gib in beiden Orten einen gleichen Namen.

<!DOCTYPE html> 
<html> 
<head> 
    <title>React ToDos App</title> 
</head> 
<body> 
    <div id="app" /> 
    <script src="ready.js"></script> 
</body> 
</html>

Quelle

2016-10-17 15:37:43

Ich weiß darüber, und es funktioniert nicht –

@KirillStas Sie erhalten einen Fehler beim Kompilieren. –

Nur wenn ich in der Konsole Webpack eingab, gibt es 'Ausgabedateiname nicht konfiguriert' zurück. –

Webpack für React funktioniert nicht

Antwort

Verwandte Themen