webpack-dev-Server nicht funktioniert

Question

aktualisieren aktuelles Problem:

es scheint, dass die webpack heiß loader schief geht, denn wenn ich die folgende cmd ausführen: webpack, kann es als usual.but gebaut werden, wenn i run "" dev ":" webpack-dev-server --farbe --hot --progress & & node ./server.js"".webpack kann keine Dateien für mich erzeugen.

mein webpack.config ist wie folgt:

module.exports = { 
    entry: getEntries(), 

..... 

function getEntries(){ 
var routeDir = path.join(SRC_DIR,"javascripts","routes"); 
var routeNames = routeDir?fs.readdirSync(routeDir):[]; 

var nameMaps = {}; 
routeNames.forEach(function(routeName){ 
    var filename = routeName.match(/(.+)\.js$/)[1]; 
    console.log("filename in entry ",filename); 
    if(filename){ 
     var devEntryPath = [ 
      'webpack-dev-server/client?http://127.0.0.1:3001', // WebpackDevServer host and port 
      'webpack/hot/only-dev-server', 
      path.join(routeDir,filename) 
     ]; 
     nameMaps[filename] = devEntryPath; 

    } 
}); 
return nameMaps; 
} 

server.js

var server = new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(3001,'localhost',function(err,result){ 
    if(err) console.log(err); 
    console.log("webpack listening at port 3001"); 
}); 
var app = express(); 


app.get("/monitor/index",function(req,res){ 
    res.sendFile(__dirname+"/src/views/"+"page1.html"); 
}); 
app.get("/monitor/category/*",function(req,res){ 
    res.sendFile(__dirname+"/src/views/"+"page2.html"); 
}); 

app.use(express.static(__dirname)) 
     .listen(9090, 'localhost', function (err, result) { 
       if (err) console.log(err); 
       console.log('Listening at localhost:9090'); 
}); 

Answer 1

Schließlich fand ich, wo das Problem ist, und kennen die Beziehung zwischen webpack-dev -Server und mein Express-Server.

bei Verwendung von Hot-Loader mit webpack-dev-server: Schritt1: Das Webpack erstellt die Eingabedatei für den publicPath (der in "output" von webpack.config.js festgelegt wurde). Schritt2, der Node-Server wird HTML an die Front senden, und suchen Sie nach den zugehörigen Assets (wie js, img etc), aber wo? wir können den Script-Pfad (im Zusammenhang mit html) zum webpack-dev-server ändern (nur von step1 generiert), so dass node-server webpack-dev-server nach Hilfe fragt. aufzusummieren, i modifizierte 3 Plätze:

• publicPath von webpackDevServer
• webpack Ausgang (publicPath) gleich
oben
• Skriptpfad in HTML.

das ist alles. Und jetzt kann mein Projekt wie erwartet ausgeführt werden.