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');
});

looks to be some sort of issue where your code changes are not being reflected correctly - have you tried a full page refresh? What happens when you add new jsx, is this reflected in the element inspector? Also what version of react are you using? — Marty
Have you got sass compiler setup within your project? You can't just include an .scss file an expect react to compile it for you! — James111
@James ,i use webpack and add loaders { test:/\.scss$/, loaders:['style','css','sass'], //loader:"style!css!sass" },and run webpack in terminal — lizlalala
@Marty, yes,i added a button tag to the Header component in render,however,it doesn't refresh though,why? — lizlalala
Make sure the CSS is being loaded in the browser via the dev tools. — James111

lizlalala lizlalala · Accepted Answer · 2016-05-09T05:38:32

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.

webpack-dev-server not working

1 Answers