CODEWITHSUNDEEP
npmwebpackhot-reload
Sam
Sam

Reputation: 2331

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

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

Upvotes: 6

Views: 17399

Answers (1)

Dan der Mensch
Dan der Mensch

Reputation: 332

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/

Upvotes: 4

Related Questions