Watch webpack.config.js and re-run webpack command in response to a file change

Question

I am using webpack.config.js and

webpack --watch --progress --debug 

to build modules.

I would like webpack --watch to restart after I change webpack.config.js file.

Is there a webpack flag I can use?

Answer 1

I have ended up using nodemon. nodemon allows executing non-node scripts in response to changes in a file system.

You cannot use it with webpack --watch because --watch is not going to exit. However, you can simply use it with webpack, e.g.

nodemon \     --watch ./\     --delay 250ms\     --exec 'node ./node_modules/.bin/webpack' 

nodemon supports configuration files that can be used to reduce the boilerplate, ignore specific files and/or directories and produce re-usable configuration.

In addition, using nodemon instead of webpack --watch works around a known webpack issue, "Does not detect minor changes to the file (added/removed whitespace, semicolon)".

Answer 2

I personally prefer my development setup to mimic my production setup as much as possible. That's why I prefer PM2 to nodemon, forever, etc.

Since you can roll this tool out in production and you have production ready toolsets built around it. Here's documentation on how to get it to watch and restart.

To get this working with webpack-dev-server you would have to wrap your config in a node server.