webpack + express.js lädt nicht bundle.js

Ich bin auf der Suche nach einer App mit Knoten + Express js als Backend und reagieren + Webpack als Front-End, aber ich bekomme immer noch Fehler und die Bundle.js lädt nicht. So sehen meine Ordner aus: Im Stammverzeichnis habe ich den Ordner node_modules, src, der den Unterordner main.js und compoenents, package.json und wepback config.js, enthält. Dies ist, wie mein Stammordner wie folgt aussieht:webpack + express.js lädt nicht bundle.js

//// webpack.config.js

module.exports = { 
    entry: './src/main.js', 
    output: { 
     path: './src', 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     port: 3000, 
     inline: true 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['react','es2015'] 
      } 
     }] 
    } 
};

//server.js

const express = require('express'); 
    const webpack = require('webpack'); 
    const config = require('./webpack.config.js'); 
    const webpackMiddleware = require("webpack-dev-middleware"); 
    const app = express(); 
    const compiler = webpack(config); 

    const PORT = 3000 || process.env.port; 

    app.use(webpackMiddleware(compiler, { 
     noInfo: false, 
     quiet: false, 
     lazy: true, 
     watchOptions: { 
      aggregateTimeout: 300, 
      poll: true 
     }, 
     publicPath: "/assets/", 
     index: "index.html", 
     headers: { "X-Custom-Header": "yes" }, 
     stats: { 
      colors: true 
     } 
     reporter: null, 
     serverSideRender: false, 
    })); 

    app.get('/', (req, res) => { 
     res.sendFile(__dirname + '/src/index.html'); 

}); 

app.listen(PORT)

/// Index .html

<!DOCTYPE html> 
<html> 
<head> 
    <title>React</title> 
</head> 
<body> 
<div id="app"></div> 
</body> 
<script src='bundle.js'></script> 
<script src="https://cdn.socket.io/socket.io-1.4.8.js"></script> 
</html>

///main.js

import App from './components/App'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(<App />, document.getElementById('app'))

/// Konsole Fehler

reporter: null, 
^^^^^^^^ 

SyntaxError: Unexpected identifier 
    at exports.runInThisContext (vm.js:53:16) 
    at Module._compile (module.js:373:25) 
    at Object.Module._extensions..js (module.js:416:10) 
    at Module.load (module.js:343:32) 
    at Function.Module._load (module.js:300:12) 
    at Function.Module.runMain (module.js:441:10) 
    at startup (node.js:139:18) 
    at node.js:968:3

Alles, was ich brauche, ist mit reagieren und webpack zu bekommen auszudrücken arbeiten, ich bin irgendwie neu zu webpack ..

Quelle

2016-09-18 Razvan Alex

Das hat nichts mit Webpack zu tun, aber mit einem einfachen m Komma. Der Fehler sagt Ihnen, wo Sie suchen müssen. – robertklep

Warum sagst du das? Ich benutze Webpack für reactive Seite .., will einfach Express js machen Webpack machen, die Hauptjs in Bündel js kompiliert –

Ich sage, dass der Fehler, den Sie bekommen, nicht mit Webpack, der Code in 'Server. js' hat einen Syntaxfehler. Die Fehlermeldung teilt Ihnen mit, wo. – robertklep

Die Middlewarekonfiguration verwendet /assets/ als publicPath, aber Sie legen in Ihrer Webpack-Konfiguration keinen öffentlichen Pfad fest.

Ich würde vorschlagen, publicPath in webpack.config.js Einstellung:

const path = require('path'); 
... 

output: { 
    path  : path.resolve('./src'), // always use absolute paths 
    filename : 'bundle.js', 
    publicPath : '/assets/' 
}

Und ihr Wert für die Middleware-Konfiguration wiederverwenden:

app.use(webpackMiddleware(compiler, { 
    publicPath : config.output.publicPath, 
    ... 
});

Schließlich, stellen Sie sicher, dass die URL in Ihrem HTML auf die richtige URL verweist :

<script src='/assets/bundle.js'></script>

Quelle

2016-09-18 13:56:37 robertklep

Danke, du hast mir sehr geholfen, als niemand konnte !!! –

webpack + express.js lädt nicht bundle.js

Antwort

Verwandte Themen