DEV Community

loading...
Cover image for 🔄 How to get autoreload for webpack config changes too.

🔄 How to get autoreload for webpack config changes too.

Francesco Di Donato
Frontend Software Engineer @CHILI. Constantly excited by the amount of knowledge that awaits around the corner.
Updated on ・1 min read

The webpack-dev-server package provides hot-reload for anything it bundles. But it does not consider the configuration file (usually webpack.config.js).
In this post I am going to show you how to autoreload depending on webpack config file changes by using Nodemon.

🤔 Problematic

Every change in webpack configuration requires a manual reboot of the webpack-dev-server (WDS).


📜 Example code

wds-auto-reload

📦 Packages

💡 Solution

The activation of the webpack-dev-server is performed by nodemon. It is instructed to restart the process every time the webpack configuration file changes.

🤓 Implementing the Solution

Premise: webpack.config.js is located in the root

Create a nodemon.json file in the root. Two instructions are sufficient:

  1. watch for changes in the webpack.config.js.
  2. execute the activation of the webpack-dev-server (in development mode).
{
   "watch": ["webpack.config.js"],
   "exec": "webpack-dev-server --mode development"
}
Enter fullscreen mode Exit fullscreen mode

Lastly tweak the start script in the package.json:

"scripts": {
    "start": "nodemon",
  },
Enter fullscreen mode Exit fullscreen mode

😎 Checking the Outcome

Try the run npm start and keep open the console. Just alter something in webpack.config.js - it will reboot by itself.


❣ More Details surviveJS

Discussion (1)

Collapse
myselfgroot profile image
Gaurav • Edited

what if we have a development server is running .... then it will open a new web page when ever we made change... that is what we don't want.... do we have any other solution

Forem Open with the Forem app