webpack --watch isn't compiling changed files

Question

I tried running webpack --watch and after editing my JS files, it doesn\'t trigger an auto-recompilation.

I\'ve tried reinstalling webpack

Answer 1

An easy solution on MacOS is the following :

Open two terminal windows in the same directory that your project resides.

In the first terminal window run : webpack --watch

In the second terminal windows run : webpack-dev-server

I have tried many possible solutions and this seems to be the most reliable

Answer 2

After trying a handful of strategies for fixing this problem I ended up just giving up but then while solving another issue I tried again and all of sudden the --watch flag was finally working.

To be honest I do not know what specifically made it work but after performing the following steps it just started working:

1. Install most recent gcc version
$ sudo port install gcc48
$ sudo port select --set gcc mp-gcc48

2. Install most recent clang version
$ sudo port install clang-3.6
$ sudo port select --set clang mp-clang-3.6

3. Export variables holding the patch to C and C++ compiler
$ export CC=/opt/local/bin/clang
$ export CXX=/opt/local/bin/clang++

It might have happened that while installing these packages some dependency just added the missing piece of the puzzle, who knows ...

Hope this help anyone struggling out there to make it working.

Answer 3

I am adding another answer because I believe that this is the best solution so far. I am using it every day and it rocks! Just install this library :

https://github.com/gajus/write-file-webpack-plugin

Description : Forces webpack-dev-server program to write bundle files to the file system.

How to install :

npm install write-file-webpack-plugin --save-dev

Answer 4

What was the cause in my case:

It seems that the value of: max_user_watches in the /proc/sys/fs/inotify/max_user_watches is affecting webpack

To check your actual value

$cat /proc/sys/fs/inotify/max_user_watches
16384

16384 was in my case and it still wasnt enough.

I tried different type of solutions like:

$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

But it seems that even if I changed the value, when I restarted my PC it would go back to default one 16384.

SOLUTION if you have Linux OS(my case, I have Manjaro):

Create the file:

sudo nano /etc/sysctl.d/90-override.conf

And populate it with:

fs.inotify.max_user_watches=200000

It seems 200000 is enough for me.

After you create the file and add the value, just restart the PC and you should be ok.

Answer 5

I met the same issue, tried many things, finally Chrome Clear Browsing Data on Mac worked for me.

These modules have been installed:

"browser-sync": "^2.26.7",

"browser-sync-webpack-plugin": "^2.2.2",

"webpack": "^4.41.2",

"webpack-cli": "^3.3.9"

Answer 6

I was having the same issue on a .vue file. When the server restarted all worked fine, but on the next save it didn't recompiled anymore. The issue was on the import file path that had one letter capitalized. It's very hard to figure this issue because everything works on a server reboot. Check the case of your paths.