Wie kann ich mein Backend vom aktuellen Webpack-Dev-Server zum Ausdruck bringen?

Question

Ich habe ein Tutorial durchgelesen, das den Webpack und den Webpac-Dev-Server von Reactj beschreibt. Aber jetzt muss ich Express in meinem realen Projekt verwenden. Wie kann ich den Server ändern, oder kann ich einfach einen neuen Server per Express hinzufügen, in diesem Fall wie kann ich zwei localhost verwalten? Sie können meine webpack.config.js unten sehen.

var debug = process.env.NODE_ENV !== "production"; 
 
var webpack = require('webpack'); 
 
var path = require('path'); 
 

 
module.exports = { 
 
    context: path.join(__dirname, "src"), 
 
    devtool: debug ? "inline-sourcemap" : null, 
 
    entry: "./app/main.js", 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.jsx?$/, 
 
     //test: /\.js?$/, 
 
     exclude: /(node_modules|bower_components)/, 
 
     loader: 'babel-loader', 
 
     query: { 
 
      presets: ['react', 'es2015', 'stage-0'], 
 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
 
     } 
 
     } 
 
    ] 
 
    }, 
 
    output: { 
 
    path: __dirname + "/src/", 
 
    filename: "index.js" 
 
    }, 
 
    plugins: debug ? [] : [ 
 
    new webpack.optimize.DedupePlugin(), 
 
    new webpack.optimize.OccurenceOrderPlugin(), 
 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
 
    ], 
 
};

Jetzt habe ich auch einen Server per Express gebaut, die bis 3000 hört:

var path = require('path'); 
 
var express = require('express'); 
 
var bodyParser = require('body-parser'); 
 

 
var app = express(); 
 

 
app.set('port', (process.env.PORT || 3000)); 
 

 
app.use('/', express.static(path.join(__dirname, 'public'))); 
 
app.use(bodyParser.json()); 
 
app.use(bodyParser.urlencoded({extended: true})); 
 

 
app.listen(app.get('port'), function() { 
 
    console.log('Server started: http://localhost:' + app.get('port') + '/'); 
 
});

mein webpack Dev-Server hat den Pfad. /node_modules/.bin und es hört auf 8080. Die Frage ist, was ich in den express f hinzufügen soll ile, um den Webpack-Dev-Server zu übernehmen. Oder wenn du denkst, ich kann sie kombinieren, wie soll ich in diesem Fall auf Express operieren? Vielen Dank!

Answer 1

Sie können mit webpack-dev-Middleware

var path = require('path'); 
var express = require('express'); 
var webpack = require('webpack'); 
var config = require('./webpack.config.dev'); 

var app = express(); 
var compiler = webpack(config); 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

app.listen(3000, function(err) { 
    if (err) { 
    console.log(err); 
    return; 
    } 

    console.log('Listening at http://localhost:3000'); 
});