DEV Community

Cover image for 🔄 How to get autoreload for webpack config changes too.
Francesco Di Donato
Francesco Di Donato

Posted on • Updated on

🔄 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


📦 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

Top comments (1)

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