How to have hot reload when using "webpack serve" on Webpack 5

Question

I just upgraded to Webpack 5, and because webpack-dev-server wasn't working anymore, I changed my npm start command from webpack-dev-server to webpack serve.

This is my npm start command

webpack serve --config  ./build-config/webpack.config.js

I can see the console updating, and printing output, but the page in the browser will not update, I have to refresh the browser page.

---

EXTRA

Adding --mode development --env development --hot to my npm start did not fix the problem

webpack version:

"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"

---

Note: I am not talking about webpack-serve

Accumulator

how are you accessing the website / project? is it directly localhost:port or are you using nginx or something? – Franfranc

localport. No nginx – Accumulator

can you check you browser developer tools -> network tab to see if webpack hot-reload calls are there or not – Franfranc

Answer 1

Possible solutions are,

If you are NOT running off of Node.js It's as simple as appending hot: true in your devServer option of your webpack config.

If you ARE running off of Node.js When creating a webpackDevServer instance in your server file, you have to pass a second options argument that contains the key-value pair hot: true

The configuration got a bit tricky since Webpack 5 came along. Until I see your dev config/package.json, I will assume you have the correct dependencies/options. It's a bit hard knowing what to take into consideration when answering your question since you didn't provide explicit input on your environment, among other things.

References

For documentation/concept: https://webpack.js.org/api/hot-module-replacement/

For a comprehensive guide: https://webpack.js.org/guides/hot-module-replacement/

Externalism

How do you pass that key-value pair? And how do you know if you’re running off nodejs? Nodejs serves the website on a local host, but I’m a bot confused by what you meant. What would be the situation when you aren’t running off nodejs? – Accumulator

Basically, are you booting your localhost by running a script (e.g: node fileName.js ), or are you using your CLI to run a webpack command? You're running off Node if you answer yes to the first part of the question. That's why seeing your code helps clear it all up. – Externalism

I don’t think I’m booting it from a script, I believe npm start just triggers the command “webpack serve”. I can’t share all my code sorry, but I could share certain parts if you name them – Accumulator

Sure, can you share your webpack.devServer field? – Externalism

I’ll have to in the morning, I’m in Canada. I’m guessing you’re in a different timeline – Accumulator

devServer: { open: true, historyApiFallback: true }, – Accumulator

Append hot: true, in there and you should see the following messages in the console [WDS] Hot Module Replacement enabled. and [HMR] Waiting for update signal from WDS. When you make changes to your codebase (excluding config files), you will see something like [WDS] App hot update... – Externalism

Did that answer your question? If not, let me know if you'd like me to clear something up. – Externalism

It did not unfortunately. I updated my question to show what the console is printing out. This happens every time I make a change, so it looks like it's hot reloading, but the browser isn't refreshing – Accumulator

I also made my script: start command to be "start": "webpack serve --mode development --env development – Accumulator

If you want to take at look at the config files, they're here, this solution works, except hot reload doesn't work when there's an error, and then the error is fixed – Accumulator