webpack --watch isn't compiling changed files

问题:

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

I've tried reinstalling webpack using npm uninstall but it's still not working.

Any ideas?

回答1:

FYI: it seems OS X can have a folder get corrupted and no longer send fsevents (which watchpack/chokidar/Finder uses) for itself and any child folders. I can't be sure this is what happened to you, but it was very frustrating for me and a colleague.

We were able to rename the corrupt parent folder and then watch events immediately came through as expected. See this blog post for more info: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

The recommended fixes from the above link are:

• rebooting the computer
• checking the disk and repairing permissions via Disk Utility
• adding the folder to Spotlight privacy list (the list of folders to not index), and then removing from it, effectively forcing a reindexing
• renaming the folder, and then possibly renaming it back
• re-creating the folder and moving the old contents back into it

First two did not work for us, didn't try the Spotlight suggestion, and the re-creation did not prove necessary.

We were able to find the root problem folder by opening Finder and creating files in each successive parent folder until one showed up immediately (since Finder will get hosed by this bug as well). The root-most folder that does not update is the culprit. We just mv'd it and mv'd it back to its original name, and then the watcher worked.

No idea what causes the corruption, but I'm just glad to have a fix.

回答2:

If your code isn't being recompiled, try increasing the number of watchers (in Ubuntu):

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

Source: https://webpack.github.io/docs/troubleshooting.html

回答3:

Adding the following code to my webpack configuration file fixed the issue for me, hope this helps. Don't forget to ignore your node_modules folder, as that would kill performance for HMR (Hot Module Replacement):

watchOptions: {
  poll: true,
  ignored: /node_modules/
}

回答4:

I have had this problem when working with WebStorm.

Disabling Settings -> System Settings -> "safe write" resolved it for me.

Found the recommendation to do so in: WebPack Troubleshooting

回答5:

Just to add to possible solutions: I had my project folder inside a Dropbox folder, moving it out solved the problem for me. (OS X)

回答6:

One issue is that if your path names aren't absolute then things like this will happen. I had accidentally set resolve.root to ./ instead of __dirname and this caused me to waste a lot of time deleting and re-creating files like the guys above me.

回答7:

If changing fs.inotify.max_user_watches as pointend out by César still doesn't work try to use polling instead of native watchers by creating your script as shown in the docs or running webpack with --watch --watch-poll options.

回答8:

Updates: deleting the entire directory and git cloning afresh from repo fixes my problem.

回答9:

If you are using Vim you should try setting backupcopy to yes rather than the default auto. Otherwise Vim will sometimes rename the original file and create a new one, which will mess up with webpack watch:

https://github.com/webpack/webpack/issues/781

Just add this to your vim settings if this is the case:

set backupcopy=yes

回答10:

Note that if you run webpack within a virtual machine (Vagrant / Virtualbox) and you change your files on the host platform, file updates in the shared folder may not trigger inotify on Ubuntu. That will cause the changes to not be picked up by webpack.

see: Virtualbox ticket #10660

In my case, editing and saving the file on de guest (in vi) did trigger webpack. Editing it on the host (in PhpStorm, Notepad or any other application) dit NOT trigger webpack whatever I did.

I solved it by using vagrant-fsnotify.

回答11:

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.

回答12:

Yo!!!! Folder case sensitivity was my issue. My code calls to require() had all lowercase path names BUT the actually directories had an uppercase letter in them. I renamed all my directories to lowercase and webpack watching worked instantly. YESssssssssssssss!!!!! _AckerApple

回答13:

It wasn't recompiling for me but then I realized / remembered that webpack watches the dependency graph and not just a folder (or files). Sure enough the files I was changing weren't part of that graph yet.

回答14:

For me, creating folders and files in VS Code was the issue. To fix, I re-cloned my repo and this time, created new folders and files through the command line instead of Code. I think Code was corrupting the files for some reason. I saw the application just updated so maybe it's a new bug.

回答15:

The way I resolved the issue was finding a capitalization error in an import path. Folder on file system had lower case first letter, import path was upper case. Everything compiled fine, so this was just a webpack watch include issue.

回答16:

Work for me in Laravel Homestead

--watch --watch-poll

回答17:

I have the same issue. And I notice it's not compiling because my folder contains some character(*). And using the old watcher plugin seems to resolve the issue. Add this line to your webpack config file.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

回答18:

I had similar issue, neither webpack or rollup in watch mode ware catching the changes I made. I found out that it was basically my fault as I was changing module (.tsx file) which wasn't yet imported anywhere in the application (for example App.ts which is entry point) and I was expecting build tools to report errors I made there.

回答19:

For me deleting node_modules and doing npm install or yarn again to install all the packages solved the problem

回答20:

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

回答21:

Possible solution: changing context to the app directory.

I had all my webpack config files in a sub folder:

components/
webpack/
 development.js
app.js

In webpack/development.js, set context: path.join(__dirname, '../') solved my problem.

回答22:

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.

回答23:

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

回答24:

Try changing --watch to -d --watch

worked for me

回答25:

The thing is: webpack loads script from some weird url: webpack:/// which is cached. You should add version at the end of your script to prevent caching: main-compiled.js?v=<?php echo time()?>"