Custom build setup with hot reload question

[druppy]

I have been working with Quasar for some time, and in order to learn a bit more about WebPack i have made my own build config.

Hot reload is really a feature I have been looking forward to be using for real, and my current dev server seems to work just fine, so each time I recompile the project my browser tells me about it, so the dev server part seems ok.

But it seems that the browser end need a bit more than the SSE client, and build indications. I have tried to include webpack-hot-middleware into my entry bundle, but my components still does not update, even when the browser indicate that it knows it should.

So, any idea as to what may be missing ?

[rstoenescu]

Do a quasar init <folder_name> and check /build folder. More specifically the webpack.dev.config.js. You need to include /build/hot-reload.js on your entry.

[druppy]

I noticed that, but that “just” include webpack-hot-middleware and makes a path for action reload, or does it contain some implicit magic ?

[rstoenescu]

It makes each entry an array containing the hot-reload script and the entry itself. Is this what you were referring to?

[druppy]

I guess so, I am struggling to understand the flow in details. I will apply the script and user some quality time with the debugger Thanks …

[druppy]

Ok, it now works like a charm using pure Webpack2!

I am using my own script (I really need to learn to handle this), and when I tried to add the webpack-hot-middleware and from the hot-reload.js file, but it did not work, but I got some strange errors in the console.

I found the ref to ServerSendEvent i bit odd, as Webpack2 devServer opened up an Websocket, and the web browser wrote all kind of relevant HMR notices (like compiling …) in my client console but no component hot update. So my browser was talking to my webpack debServer, but not any further. I am using vue-loader, and i checked that it also injected the hot reload code, so the middleware in webpack did not work

Then … I discovered my main error here, I was using webpack-dev-serverversion 1.x … after an update (2.3.x), I got beautiful hot updates, and I was really happy.

The bonus … when updating components, we get all kinds of random strings in the console, but we really just like real names, and I found that adding new webpack.NamedModulesPlugin() to your webpack plugins, make everything readable again.

Hope this may help someone …

[rstoenescu]

I see no difference by adding NamedModulesPlugin for the default starter kit. What does this do?

[druppy]

In stead of stange random names when components reload, it gives me file names … very useful

[rstoenescu]

@druppy can you make a screenshot pls? It sounds interesting to add to the default starter kit, but it has no effect for me… or am I looking in wrong place?

[druppy]

NamedModulesPlugin screenshot

I think that the std templates are not using devServer 2.3.x … as you need the hot-reload.js file, and that could be the reason for the problems ?

[rstoenescu]

Do you have a repo I can take a look, pls? I’m curious about something.

[druppy]

No, sorry … but I can give you the webpack config file if this helps ?

I will start using this in i private project soon, so that could be useful, but i don’t have it ready now

[druppy]

This is for you : https://github.com/druppy/quasar-test

$ npm i; npm run dev2 makes a plain template project, but using my single webpack file, and separate css file btw.

I really like being able to use std tools like npm and vue-cli, to prevent to much wheel inventing