🔄 How to get autoreload for webpack config changes too.

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

• webpack
• nodemon

💡 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"
}

Lastly tweak the start script in the package.json:

"scripts": {
    "start": "nodemon",
  },

😎 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

Comments

[Gaurav]

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