I made Webpack's hot reload function work with my existing complicated Express.js app. I watched Lawrence Whiteside's video that taught me how to setup Webapck with Express, which was very helpful but Whiteside's tutorial is about setting up a very simple new Express app with Webpack while I was trying to integrate Webpack with an existing complicated app, so it's expected that I would run into extra hurdles and I did.
So the problem is that I had to configure Webpack so that the webpack-hot-middleware's client will make a correct HTTP request to get updates from the Webpack Dev Server. It sounds simple but when I was in the maze, I did not see an exit and I did not know if there was an exit and if there was one, how much more difficulties that I would encounter before reaching the exit.
Luckily, even though there was an error, I also saw "[HMR] connected" in the Chrome console. And when I changed a local file and saved, both the Chrome console and the webpack-dev-server's console displayed new messages. So things were connected; it's just not perfectly connected.
Seeing the URL the webpack-hot-middleware's client requested, I realized that it was using a wrong URL; the URL won’t return the needed information for a hot reload. So I searched online for articles about express and webpack, and soon I found out that I only need to do one extra configuration, which is to configure publicPath for Webpack's output.
Solving this issue required thinking, reading console outputs, doing research, and most importantly some courage to face the challenge. I'm glad that I can develop my Express.js app with Hot Module Replacement enabled by webpack-dev-server from now on.
Top comments (0)