webpack-dev-server not working

Question

Update current problem :

it seems that the webpack hot loader goes wrong,because when i run the following cmd:webpack,it can be built as usual.but when i run ""dev": "webpack-dev-server --color --hot --progress && node ./server.js"".webpack cannot generate built files for me .

my webpack.config is as follows:

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

finally,i found where the problem is,and know the relationship between webpack-dev-server and my express server.

when using hot-loader with webpack-dev-server: step1:the webpack build the input file to the publicPath (which was designated in "output" of webpack.config.js). step2,the node server will send html to the front,and search for the related assets(such as js,img etc),but where? we can change the script(related with html) path to the webpack-dev-server.(just generated by step1),so node-server will ask webpack-dev-server for help. to sum up ,i modified 3 places:

• publicPath of webpackDevServer
• webpack output(publicPath),equal to above
• script path in html.

that's all.and now,my project can run as expected.